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!