Streaming live at 10am (PST)

How to apply custom code to my nav bar?

Hello,

I want to add custom code to a navbar that is made on Webflow. I have my navbar set up but now want to edit an interactive feature. I already have the code for that feature as well. What I am trying to do is have the navbar start on the bottom of the opening page, and then as the user scrolls down, the navbar goes up and sticks to the top. An example of it can be found on this website: https://www.thedistrict.co.uk/

So how do I apply the code to a navbar I already made on Webflow?


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

Quite simple actually.

Order your Navbar after your first section/div.
image

Set the Navbar Position to Sticky and a top of 0
image

Then to get it to align to the bottom properly you may have to do a calc for the height of your first section/div, which would require some custom css to be applied to the class. Something like:
height: calc(100vh - 100px)

1 Like