Fixed Nav Bar

[hollowxrequiem]

Forum URL: cc-test-site.proboards.com/

Hello! So I've been experimenting with moving the navigation bar from below the banner to above the banner, and to the top of the screen. I've seen some nav bars in fixed position at the top of the screen so that when you scroll down the forum, the navigation doesn't disappear as you scroll. I was wondering how I might go about making the nav bar fixed?

[Stinky666]

In your Style Sheet, find:

#navigation-menu {
padding: 0 8px;
background: #eeeedd url('http://images.proboards.com/v5/gradients/light.png') left center repeat-x;
border: 0px solid #778888;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}


and add the following to the bottom of it, but just above the }:

position: fixed;
width: 100%;
z-index: 999;

So you will now have:

#navigation-menu {
padding: 0 8px;
background: #eeeedd url('http://images.proboards.com/v5/gradients/light.png') left center repeat-x;
border: 0px solid #778888;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
position: fixed;
width: 100%;
z-index: 999;
}

[hollowxrequiem]

This line? Link I don't see a line that looks exactly how you've described.

[elli]

adoxography.boards.net/thread/347/sticky-menu-bar

Try this...

[MobFox]

Nov 8, 2013 19:22:50 GMT -8 elli said:

adoxography.boards.net/thread/347/sticky-menu-bar

Try this...

Oops, there was an error!
You do not have permission to access this thread.

[Stinky666]

Nov 8, 2013 18:21:42 GMT -8 hollowxrequiem said:

This line? Link I don't see a line that looks exactly how you've described.

Yep that one.

[elli]

Nov 8, 2013 19:46:32 GMT -8 MobFox said:

Nov 8, 2013 19:22:50 GMT -8 elli said:

adoxography.boards.net/thread/347/sticky-menu-bar

Try this...

Oops, there was an error!
You do not have permission to access this thread.

Shoot, forgot there was a post limit. Pasted it here.

TEMPLATE MOD PORTION:

---

1. Navigate to Admin > Structure > Layout Templates > Forum Wrapper
2. Find the following snippet 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 block of text, then press CTRL + X on your keyboard to cut
4. Find the following snippet of code, and create a new line just under the closing {/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 on your keyboard to paste

CSS PORTION:

---

1. From the admin panel, navigate to Themes > Advanced Styles & CSS > Stylesheet
2. Scroll to the absolute bottom of your template's stylesheet
3. Paste the following CSS snippet to override the default styles:

/* ==========================================================================
  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: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  -moz-box-sizing: border-box;
  -webkit-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
  ========================================================================== */

[MobFox]

Nov 8, 2013 20:05:52 GMT -8 elli said:

Nov 8, 2013 19:46:32 GMT -8 MobFox said:

Oops, there was an error!
You do not have permission to access this thread.

Shoot, forgot there was a post limit. Pasted it here.

TEMPLATE MOD PORTION:

---

1. Navigate to Admin > Structure > Layout Templates > Forum Wrapper
2. Find the following snippet 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 block of text, then press CTRL + X on your keyboard to cut
4. Find the following snippet of code, and create a new line just under the closing {/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 on your keyboard to paste

CSS PORTION:

---

1. From the admin panel, navigate to Themes > Advanced Styles & CSS > Stylesheet
2. Scroll to the absolute bottom of your template's stylesheet
3. Paste the following CSS snippet to override the default styles:

/* ==========================================================================
  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: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  -moz-box-sizing: border-box;
  -webkit-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
  ========================================================================== */

thanks

[hollowxrequiem]

Elli that works beautifully, thank you!

[Farmduck]

Thanks elli. I had the same query and your answer was excellent.

rugbyleagueuniverse.freeforums.net/

I still don't know why this forum recognises me at the Log in page then thinks I'm a Guest whenever I post.

[Yog]

Thanks for this elli.

For the most part, it works like a charm. I do have one small issue that I wonder if you or anyone can help me with - the Control bar. i.e. the bar that appears across the top of the page while inside a thread that contains prev, page numbers, next, actions dropdown, search.

This part;



Now typically, before you fit this code on a board that control bar will stick to the top of your browser window as soon as you scroll down far enough. However, with this code, it doesn't quite work as seamlessly. Instead of stopping once the control-bar is flush to the bottom of the nav-bar, instead it begins to make it's way to the very top of the window as you scroll downwards, then hops back to the base of the nav-bar once you scroll too far.



I made my nav-bar transparent here to demonstrate visually. You can see the border remains where the bottom of the nav-bar is positioned;

i) In correct position at top of post.



ii) Incorrect position mid-scroll. Control-bar is partially behind the nav-bar, partially not.



iii) Once you go far enough, it "hops" back down to it's final position. it should never go past this spot in the first place.



I am not a complete beginner, but I don't know enough to figure out how to fix this Can anyone help?

[elli]

Yog This never concerned me because it only happens for a split second as you're scrolling... The control bar's positioning is controlled by a script on ProBoards' end. Basically it jumps from its initial position once it reaches the top of the page, when it would otherwise disappear. To fix this, we would have to write a script that changes the position once it reaches the top of the page + the height of the menu bar.

I put this together, and while it works, it's not working as expected. Scripting isn't my deal. Maybe someone who knows JS better could have a look. Xikeon? You can see what it does here

<script>
$(document).ready(function(){
   var $nav = $('#navigation-menu');
   var $bar = $('.container>.control-bar');
   var $pos = $nav.position();
   var $out = $bar.outerHeight();            

   $(window).scroll(function() {
       var $windowpos = $(window).scrollTop();
       if ($windowpos >= $pos.top + $out) {
           $bar.addClass('stick');
       } else {
           $bar.removeClass('stick');
       }
   });
});
</script>
<style>
.stick {
   position: fixed !important;
}
</style>

[Yog]

Oh nice, cheers. I will have a play around with this and report back with how I get on. Thanks for being so prompt!