Adding a fixed navigation bar

Ever see those fancy websites that have a fixed navigation menu at the top? Well, I wanted to show you how you can achieve the same effect in Webflow. I’ll use the Slate Template as an example.

First, we’ll select the header section, and give it an additional class (“Header”). Since there are a lot of "Section"s on the page, we don’t want to fix all of them to the top, so we need to isolate the selector just to our navigation bar. Make sure that it says “Affecting 1 elements on the page”.

With the header selected, go to the Advanced settings under Position and change the position to ‘Fixed’.

Once that happens, your heading might become really funky. That’s because it defaults to being fixed in the top left. Just click the ‘Top’ preset and it should align nicely. Also, you’ll need to set a z-index value higher than 0 to make sure that the heading appears above everything else on the page (unless something else has an even higher z-index value).

At this point, your header will be fixed at the top, but you’ll notice that the body contents are now hidden underneath and cut off.

In order to fix this, we need to offset the body padding by the height of the heading. You can do that by selecting the body element any of the following ways:

  • Click on an empty part of the bottom of the page, which could be the body
  • Use the up arrow key to navigate up the document tree until you get to the top
  • Click on the Navigator tab and click on the Body node at the top

Once you’ve done that, you can adjust the top padding of the body:

So you should now have a fully functional header that stays fixed at the top as you scroll!

We’re working on making this process much more straightforward in the near future, so stay tuned!

12 Likes

Thanks for this!! Will be trying this tutorial out and see how well it works for me.

Great! Thanks! this works when I have to fix it at the top.
Is there a way to fix at the to of a section exactly how it happens on this forum page.

here you have the
Webflow community — then comes

Forums ---- which sticks for a while and then

the actual topic “Adding a fixed navigation bar” stick for the rest of the scroll.

I have my first section with my website name and tag line and nothing else. I want a header to stick from the next section onwards and stay at the top for the rest of the scroll, like this page. Is there a way to do that. It would be great if you could explain it like how you have done for the above post, with screen shots.

Thanks!
Mikhil

Yes, I would like to know how to do this as well!

I don’t know if this helps, but @Fellipe_Abreu found a way to do these Sticky Menu bars (but I’m sure it needs a more thorough explanation).

Thanks Heaps! This helps me a lot!

Great explanation - but I’m going to throw a spanner in the works!

Is there any easy way to make the fixed nav bar collapse upon scrolling?

Ie, once it reaches a certain part in the page it collapses to half it original height? Or is this some custom javascript trickery?

Definitely some javascript trickery. I’d ask this question in that topic.

1 Like

Update - I set the nav bar to 1000 as z-index - this actually works - but it is a semantic and well-behaved method? :slight_smile:

Thanks for the guide… but I have some elements that appear on top of my fixed nav bar - I can’t figure how to control their z-position. Plllease help!
Look here: http://tm2014.webflow.com/

@superfetz The nav seems to overlap everything so you’re good!

In order to change the z-index you have to set your Position to either Relative, Absolute or Fixed. If you just want to add a z-index and not change the position of the element i’d suggest Relative. :slight_smile:

Thanx Sergie!
It helped a lot to watch your complete website walk-through again :wink:

Hey, But if the menu does not start from the beginning of the page? I want the menu stops after the logo section
https://preview.webflow.com/preview/silmetdental-new-site?preview=e66ae82d58d347c877c12c18f6ed5d2b