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;
- Remove the navbar from the main content wrap and put it directly inside the body above.
- Add a top margin of 100px to the navbar element and remove the same from the main content wrap
- Set the navbar to a max-width equivalent to your content container (about 940px), then center it.
- add a div block of about 200px height and 1px width with a class of trigger directly inside the body, set position to absolute
- 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);
- Select your navbar and add a class called fixed to it.
- Set the navbar position to fixed and set the width 100%. Remove the top margin of 100px.
- 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>