Creating a Transparent Navbar with Hero Header in Webflow

·

In Webflow the structure of a page has the navbar outside the main element. Is there a way to have a transparent navbar element and a background sits behind the navbar a hero header element? So:

1.
Body

a.
Navbar
b.
Main

i.
Hero header

And I want to have an image at the top of the page and the navbar and hero header on top of it.

3 comments

· Sorted by Oldest

Sofian B.
·
Hi Blair, Yes, it’s possible. I did it for the website: https://www.anytech-balkonbau.ch/ You can see that my nav is following your structure. The trick is to change the position of the Nav bar from static to fix (or sticky) and change the top position to 0 (to make sure it stays on top) For the sticky, Webflow as a tuto here: https://www.youtube.com/watch?v=5UlHsX1KDco If you have any other questions or need further assistance, please don’t hesitate to reach out. I’m here to help.
🙌1
Blair
·
Thank you. Did making those changes impact how the component worked at all?
Sofian B.
·
If you change the position, it shouldn’t impact the behavior of the Navbar component.
🙌1

Sofian B.
·
Hi Blair, Yes, it’s possible. I did it for the website: https://www.anytech-balkonbau.ch/ You can see that my nav is following your structure. The trick is to change the position of the Nav bar from static to fix (or sticky) and change the top position to 0 (to make sure it stays on top) For the sticky, Webflow as a tuto here: https://www.youtube.com/watch?v=5UlHsX1KDco If you have any other questions or need further assistance, please don’t hesitate to reach out. I’m here to help.
🙌1
Blair
·
Thank you. Did making those changes impact how the component worked at all?
Sofian B.
·
If you change the position, it shouldn’t impact the behavior of the Navbar component.
🙌1