Relume
Log in

Community forum for knowledge and support

Updated 9 months ago

Transparent Navbar and Hero Header with Background Image

At a glance

The community member is asking how to have a transparent navbar element with a background behind it, and a hero header element on top of an image at the top of the page in Webflow. Another community member responds that this is possible, and the trick is to change the position of the navbar from static to fixed (or sticky) and adjust the top position to 0 to keep it on top. The community member then asks if making these changes would impact the behavior of the navbar component, and the other community member confirms that changing the position should not impact the behavior.

Useful resources
BBlair
·

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
  1. Navbar
  2. Main
  1. 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.

S
B
3 comments
SSofian Bettayeb

Hi ,
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.

BBlair

Thank you.

Did making those changes impact how the component worked at all?

SSofian Bettayeb

If you change the position, it shouldn’t impact the behavior of the Navbar component.

Add a reply
Sign up and join the conversation on Slack