Streaming live at 10am (PST)

Transparent TopBar

Hey Community,

i have a transparent navbar. I have a logo, links…or burger menu.
Now, I want the content doesnt appear under the navbar when scrolling down.

How can I ‘mask‘ my body content? Or limit the scrolling?

So your issue is that the header goes on top of your nav when you scroll down, due to the nav being transparent?

You can try css masking making all containers fade into nothing just below the header. Even though that might be cool, I know from experience that it could look weird.

You could also lower the header some, and have it go sticky with dark BG when it reaches the top.


Yes, kind of… You#re right.
I want the TopBar is like an invisible cloud, sucking the content, while scrolling down.
So, I need to find out, how to write a custom css, for that?

Screenshot from SketchApp:
In Sketch, I would create a full screen mask the blue box
(MaskMode:Alpha with a Gradience to 0%)

Would love to get to know this principle in webflow.

First, I’m going to try your way. Thanks, Appreciate! <3

mask-image and linear-gradient are the terms you’re looking for. :slight_smile:
Do keep in mind you’re not getting this to work in IE11. If that browser is a target browser of yours, you need to have a fallback.

Internet Explorer usage in the Western World is about 4%. Worldwide is about 7-8%.

Great,
I ll read all about it.
No I struggle, How I can integrate it into webflow.

And LOL, No, IE11 is not my target. 92% of the world is enough for me.
:smiley:

Thank you so much…You bought me forward.

Masking with mask-image is not currently supported in the designer from what I can see. It’s still experimental in most browsers (https://caniuse.com/#feat=css-masks) BUT stable. You would need to use custom code.

1 Like

ok, webflow did not satisfy me here…

I m sad.

For me, it’s a normal thing.
There are thousands of transparent navbars out there.
Why cant I just limit the content or the content till the navbar,
to save the readability of all content.

Or should I double the background image, and create the hierachy so the content flow between?

What can I do?