Need Help: Elements Visible Through black-translucent native header on Scroll

Hey everyone!

I’m working on a bit of a tricky issue with the native header and could really use your expertise. I’ve set up a page with a transparent header adn change the body color with a simple html, which looks great until I start scrolling.

That’s when I run into a problem: the page elements are visible through the header as I scroll.

I’ve got the original page set up with groups that scroll on overflow. But this setup doesn’t seem to work well with utilizing the page’s scroll position.

Has anyone faced something similar or have any ideas on how I could solve this? I’m open to any suggestions or tips you might have!

Thanks in advance!

Make sure the header has a background color so that it is not transparent and the other elements on the page are not able to be seen through it.

1 Like

Hey, and thanks for you reply :slight_smile:
yes thats is abvious a sulotion, but then i lose the ability to dynamical change the the header color?

@sxtn.digital what are you talking about? You do not lose the ability to dynamically change the color of the header if you make it so the header has a color and is NOT transparent.

Your issue is that your header is Transparent, which means, there is no background color, so if you kept it transparent, then yes, you do not have an ability to change the background color, because there is not one, and yes, you would remain with the issue you are experiencing.

You should work with the NoCode solution that Bubble created by using NoCode in as many areas as possible, and in terms of dynamically changing the color of an element, there is no reason to use code, even simple HTML. But even if you did add a background color to the header, your simple HTML should still work to change the background color if the HTML is correct.

Either way, just use the background color setting on the header, then whenever you needed it to change the background color dynamically, use Dynamic expressions in the Color selector on the element.

  1. What is your use case of the dynamic color?

  2. Where is the dynamic value coming from?

  3. When does the color need to change?

@boston85719 im refering to the native ios header. as shown in the image.
What i understand it can only be White, black and transparant?

Screen Shot 2024-01-22 at 11.22.30 AM

That is important information to know

1 Like