Delayed Sticky Navigation

[Elli]

Delayed Sticky Navigation

Delay the sticky effect until the user has scrolled past the navigation bar.

1. Go to Admin > Structure > Layout Templates > Forum Wrapper
2. Assuming you're starting with the default ProBoards theme, find the following lines of your menu bar's HTML:
   
   {if $[navigation.menu.notification.total]}
   <div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
       <div class="tip-number">$[navigation.menu.notification.total]</div>
       <span class="tip"></span>
   </div>
{/if}
   
3. Remove <span class="tip"></span> from the navigation item's HTML
4. Click Save Changes
5. Now go to Themes > Advanced Styles & CSS > Stylesheet > "Style Sheet"
6. Scroll to the bottom of your stylesheet and create a new line
7. Paste the following on the new line you just created:
   
   /* ==========================================================================
  Sticky Navigation
  ========================================================================== */

.sticky-navigation {
   border-radius: 0;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   position: fixed;
   top: 0;
   width: @wrapper_width;
   z-index: 1005;
}

/**
* 1. The amount of space between the text and bubble
*/

#navigation-menu div.tip-holder {
   margin-left: 5px; /* 1 */
   position: relative;
   right: 0;
   top: auto;
}

/**
* 1. This number should be equal to the height of your navigation bar
*/

.container > .control-bar {
   top: 31px !important; /* 1 */
}
   
8. Click Save Changes
9. Now go to Admin > Structure > Headers & Footers
10. Click on "Global Header & Footer"
11. Paste the following script to your Global Headers:
    
    <script>
$(function() {
   // Scrolling navigation bar
   (function scrollingNav() {
       var $nav = $("#navigation-menu");
       var pos = $nav.position();

       $(window).scroll(function() {
           var windowpos = $(window).scrollTop();

           if (windowpos >= pos.top) {
               $nav.addClass("sticky-navigation");
           } else {
               $nav.removeClass("sticky-navigation");
           }
       });
   })();
});
</script>
    
12. Click Save Changes