Make your Navigation Fixed when Scrolling on Blogger

Navigation Fixed when Scrolling on Blogger

Many popular sites, like Facebook for example, are starting to use a scrollable or sticky navigation bar. This is a menu navigation bar that is under/above your header and once you scroll and the top of the window "hits" the navigation bar, the navigation bar will "stick" to it and scroll down the content of the page. I have one planned for the update to this site. It means that the user/reader, doesn't have to scroll back to the top of the page to choose a different page or topic. Here's how to do it on Blogger.

BEFORE
As with editing anything on your blog, make sure you backup! Go to Design > Template > Backup/Restore > Download Full Template.

FYI
The code below and effects may differ depending on your template/theme, so leave me a comment below with your URL if you are having problems.

Step 1

Set up your navigation bar. Learn how to create a drop down menu bar here.

Layout > Add a Gadget > Add a HTML/Java > Paste the following & Save

<sticknav> 

<div id="mymenu"> 

<ul> <li><a href="#"> Home </a></li> <li> <a href="#">about </a></li> <li> <a href="#">contact </a></li> </ul>

</div>

</sticknav>

If you already have a navigation set up, you will need to place before it and after it. In your HTML look for for navbar div, it could look like any of these, depending on your template.

• <div id='Navbar'>
• <div id='Nav'>
• <div id='Navcontainer'>
• etc.

before these codes add <sticknav> and after the closing div </div> add </sticknav>

If you set your navigation menu bar up in the HTML/Java Gadget, then just place it before and after the code in there.


Step 2

Layout > Edit HTML > Proceed > Find ]]></b:skin> and above it place the following

/* Sticky Navigation Bar */
sticknav {
background: #ffffff;
height: 90px;
width: WIDTHpx;
margin-right: 0px;
margin-left: -10px;
position: relative;
z-index: 9999;
}

.fixed {
 position:fixed;
}

Note: You may need to alter whats in RED, depending on your theme.


Step 3
Layout > Add a Gadget > Add a HTML/Java > Paste the following & Save


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

 //Calculate the height of <header>

 //Use outerHeight() instead of height() if have padding

    var aboveHeight = $('header').outerHeight();

 // when scroll

    $(window).scroll(function(){
   
  //if scrolled down more than the header's height
        if ($(window).scrollTop() > aboveHeight){
   
   // if yes, add "fixed" class to the <sticknav>
   // add padding top to the #content (value is same as the height of the sticknav)
            $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
   
   // when scroll up or less than aboveHeight, remove the "fixed" class, and the padding-top
            $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

Step 4

Style your navigation/menu using the div id's and CSS