Making NavBar Transparent over Hero Image

Is there a proper way to make the nav transparent to get the hero image to show through? Have searched and haven’t found a straight forward example. I did experiment by setting nav bg to transparent, body bg transparent, set hero image itself to relative with -114 top position and it seems to work (or at least visually match what I want to achieve) but is it the correct way? Is there a better way? Attached screenshots showing what I currently have with the position set to relative and screenshot of webflow navigator panel.



Here is my site Read-Only: LINK
(how to share your site Read-Only link)

What you’ll want to do is set the Navbar element to position: absolute and align it to the top instead. This will it to sit over the other elements without taking up any vertical space—meaning the first section will tuck itself underneath without adjustments to its position :+1:

1 Like

Ahhh! Yes, this worked perfectly. Sharing a screenshot in case it helps anyone else. Thank you!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.