Help with sticky/scrolling navbar on my website

[SteveRetro (Steven)]

Hello all,

I am trying to make the navbar on my website be continually accessible for visitors as they scroll down. I have tried the tutorials and followed some advice on the forums but with no luck.

Here is my site: https://preview.webflow.com/preview/cv2016?preview=eaf8b3c933db05cadcd7e35693312cda

Really appreciate a solution, thank you.

Regards,

Steven

[AlexManyeki]

Writing something for you to refer to in a moment.

[AlexManyeki]

Hey Steven. There are currently two ways of doing this. Through custom code and through using a second navbar. Personally I would suggest custom code since its easy to implement.

NB: Always have your navbar sitting directly inside the body so that sections can align properly to it when you scroll

Lets start by doing this;

1. Remove the navbar from the main content wrap and put it directly inside the body above.
2. Add a top margin of 100px to the navbar element and remove the same from the main content wrap
3. Set the navbar to a max-width equivalent to your content container (about 940px), then center it.
4. add a div block of about 200px height and 1px width with a class of trigger directly inside the body, set position to absolute
5. Copy the border and shadow styles of your content container to match

Now, lets make it fixed on the top when it scrolls a certain height (height of that div we added on step 4 above);

1. Select your navbar and add a class called fixed to it.
2. Set the navbar position to fixed and set the width 100%. Remove the top margin of 100px.
3. Then center the fixed navbar setting 50% position left and a -50% on X in Transforms. See here for more help on this.

Finally add this to the footer code section in the dashboard;

<script> $(window).scroll(function() { if($(window).scrollTop() > $('.trigger').height()) { $('.navbar').addClass('fixed'); } else { $('.navbar').removeClass(fixed'); } }); </script>

[SteveRetro (Steven)]

Hello Alex, sorry for late reply, will try your idea out now, appreciate the help, thank you.