Sticky Navigation

[elli]

Sticky Navigation

Preview

This effect is achieved with two simple techniques: first, a minor template mod moves the navigation above the forum wrapper; second, CSS overrides a handful of default styles to bring it all together. Without the CSS, your navigation won't stick, so don't leave it out!

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:
   
   <a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
   <ul role="navigation">
       {foreach $[navigation.menu]}
           <li>
               <a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
                   $[navigation.menu.name]
                   {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}
               </a>
           </li>
       {/foreach}
   </ul>
   <p id="welcome">
       {if !$[current_user.is_member]}
           Welcome Guest.  Please $[login_link] or $[register_link].
       {else}
           <span>Welcome $[current_user.name].</span>  $[logout_link]
       {/if}
   </p>
</div>
   
3. Select this HTML, then press ctrl + X (OSX: ⌘ + X) on your keyboard to cut
4. Find the following lines, and create a new line above the opening {if...}:
   
   {if $[maintenance_mode]}
   <div class="maintenance-header">
       {if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
   </div>
{/if}
   
5. On the new line you just created, press ctrl + V (OSX: ⌘ + V) on your keyboard to paste
6. Remove <span class="tip"></span> from the navigation item's HTML
7. Click Save Changes
8. Now go to Themes > Advanced Styles & CSS > Stylesheet > "Style Sheet"
9. Scroll to the bottom of your stylesheet and create a new line
10. Paste the following on the new line you just created:
    
    /* ==========================================================================
  Sticky Navigation
  ========================================================================== */

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

body {
   padding-top: 31px; /* 1 */
}

/**
* 1. This number should be the preferred distance between your header and
*    the navigation bar
*/

#wrapper {
   margin-top: 20px; /* 1 */
}

#navigation-menu {
   border-radius: 0;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   position: fixed;
   top: 0;
   z-index: 1005;
   width: 100%;
}

/**
* 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 */
}
    
11. Click Save Changes

---

BONUS: 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

---

You are welcome to edit this code however you wish. However, please don't claim it as your own. :)

[?adwoman?]

my logout function seems to be out of place in one can this be fixed?
milltown.proboards.com/forum

Attachments:

[elli]

Jan 2, 2014 10:57:09 GMT -8 ?adwoman? said:

my logout function seems to be out of place in one can this be fixed?
milltown.proboards.com/forum

Please follow the directions to correctly place the navigation bar outside of the forum wrapper.

[?adwoman?]

Jan 2, 2014 11:48:29 GMT -8 elli said:

Jan 2, 2014 10:57:09 GMT -8 ?adwoman? said:

my logout function seems to be out of place in one can this be fixed?
milltown.proboards.com/forum

Please follow the directions to correctly place the navigation bar outside of the forum wrapper.

OK AND THANK

[blc]

Jan 2, 2014 11:48:29 GMT -8 elli said:

Jan 2, 2014 10:57:09 GMT -8 ?adwoman? said:

my logout function seems to be out of place in one can this be fixed?
milltown.proboards.com/forum

Please follow the directions to correctly place the navigation bar outside of the forum wrapper.

I did this to one of my forums last night. I found that once the forum scrolled up i could not read/see the nav bar. white on white. So I took it out. What I was wondering is if I add a color behind the nav bar instead of transparent, should that be done prior to making these changes?

[elli]

Feb 14, 2014 14:41:58 GMT -8 blc said:

Jan 2, 2014 11:48:29 GMT -8 elli said:

Please follow the directions to correctly place the navigation bar outside of the forum wrapper.

I did this to one of my forums last night. I found that once the forum scrolled up i could not read/see the nav bar. white on white. So I took it out. What I was wondering is if I add a color behind the nav bar instead of transparent, should that be done prior to making these changes?

Please post a link to your board for support questions.

[Forever Sunshine]

elli I'm wondering, if I shorten the length of this, how would I then center it? Also, I noticed with the nav bar now stickied to the very top, the little notifications bubble gets cut off. Is it possible to put a bit of padding at the top of the nav bar to lower it a bit from the top. Even 3px would be helpful. 

Thanks

[elli]

Mar 28, 2014 20:15:18 GMT -8 Forever Sunshine said:

elli I'm wondering, if I shorten the length of this, how would I then center it? Also, I noticed with the nav bar now stickied to the very top, the little notifications bubble gets cut off. Is it possible to put a bit of padding at the top of the nav bar to lower it a bit from the top. Even 3px would be helpful. 

Thanks

Sure, give this a try. All I've done is replaced the 100% width with a pixel value, added a left position of 50%, and a negative margin half of the total width. Plus enough padding to show the top of the bubble. Just change the values with whatever works for you; for example, if you want the nav bar to be 1250px wide, the negative left margin would be -625px. Make sense?

/* ==========================================================================
  STICKY MENU CSS BEGINS HERE
  ========================================================================== */

#wrapper {
   /* This number should be the preferred distance between your header and
      the menu bar PLUS the height of your menu bar */
   margin-top: 50px;
}
#navigation-menu {
   width: 900px;
   margin-left: -450px;
   padding: 13px 8px 0;
   position: fixed;
   top: 0;
  left: 50%;
   z-index: 9999;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}
.container>.control-bar {
   /* This number should be the height of your menu bar */
   top: 31px !important;
}

/* ==========================================================================
  END OF STICKY MENU CSS
  ========================================================================== */

[fraser7]

hi,
is there a way i could do this with the menu bar still under the header?
thanks,
Fraser

[bai]

elli

Thanks for a great code! I was wondering if I could get some pointers on how to fix the action bar. When scroll down, everything is fine until it's time for the action bar to scroll with it.

[elli]

bai The action bar behavior is controlled by ProBoards; I found that trying to overwrite it was too tedious (at least relative to my knowledge at the time), and decided that the few pixels before the action bar sticks were not enough to fuss over. Most people don't notice as they scroll. But this is in the CSS:

.container>.control-bar {
  /* This number should be the height of your menu bar */
  top: 31px !important;
}
So that the menu won't overlap the action bar when it does start scrolling.

[bai]

Appreciate the help and the code!

[Symphony 🎻]

Would there be any way to move the notification bubbles? Currently, they're clipping through the top of my forum. Is there a way to move them to beneath the bar?

[elli]

Symphony 🎻 Yeah, it's expected that you would edit that yourself. You're looking for the #navigation-menu div.tip-holder styles in your CSS. Admin > Themes > Advanced Styles & CSS > "Style Sheet"

[Symphony 🎻]

Jun 3, 2019 8:37:57 GMT -8 elli said:

Symphony 🎻 Yeah, it's expected that you would edit that yourself. You're looking for the #navigation-menu div.tip-holder styles in your CSS. Admin > Themes > Advanced Styles & CSS > "Style Sheet"

I found how to change it about half an hour after I posted in this thread. XD I'm sorry about that ~