Create a sticky or fixed navigation when scrolling on Blogger

Many popular sites these days are starting to add a fixed or sticky navigation to help visitors find their way around the site. It means that the reader doesn’t have to scroll back to the top of the page to choose a different page or topic. Instead they have access to the main navigation at all times.

A fixed navigation is placed at the very top of the page and remains there when scrolling down. A sticky navigation is usually placed beneath the header, once the visitors starts to scroll down the navigation will become fixed once it “hits” the top of the browser window.

TUTORIAL 1 – Custom Fixed Navigation Bar

To make your navigation bar appear at the top of your blog on load and fixed to the top of the browser window while the user is scrolling.

1. Firstly, you’ll need to set up your navigation. Here is a tutorial showing you how to create and style a basic navigation bar. I have tons of other navigation bar tutorials here.

2. If you already have a custom navigation menu set up you’ll need to wrap it in a div with the id navigationbar like so

<div id="navigationbar">

... Navigation goes here ...

</div>

3. Go to Template > Edit HTML and above ]]> </b:skin> add the following code –

/* START XOMISSE FIXED NAV BAR */
#navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}
/* END XOMISSE FIXED NAV BAR */

4. To remove Blogger admin navbar, go to Layout > NavBar and turn it off. You’ll be left with a blank space. To remove this gap go to Template > Edit HTML and above ]]> </b:skin> add the following

body .navbar { height: 0px; }

TUTORIAL 2 – Sticky Navigation Bar

If your navigation bar is under your header and you want it to stick to the top of the window when you scroll past it then follow this tutorial.

1. Go to Template > Customise > Advanced > Add CSS and add the following code. When you add CSS to the Template Designer on Blogger, it gets placed before ]]></b:skin> in your template. Change the coloured code to suit your blog layout. Click Apply To Blog.

/* START XOMISSE STICKY NAV BAR */
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
/* END XOMISSE STICKY NAV BAR */

2. Next, you’ll need to set up your navigation. Here is a tutorial showing you how to create and style a basic navigation bar.

3. Find the code for your navigation code – this is could be in your template or in a gadget. Paste <sticknav> before it and </sticknav> after it.

<sticknav> 

(code for navigation)

</sticknav> 

4. The final step is to add a script to tell the bar to scroll. To do this go to Layout > Add Gadget > HTML/Javascript Gadget and paste the following.

<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() {

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

    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script> 

5. The script presumes that your header is called header (see pink line). If the navigation is jumping replace

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

with the following, adjust the value for the height your header is

var aboveHeight = 300;

TUTORIAL 3 – Fixed Pages Gadget

If you’re using Bloggers Pages gadget, you can simply add the following code to make it fixed to the top of the browser window. Go to Template > Edit HTML and add this code above ]]> </b:skin>

#PageList1 { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

The selector you use (#PageList1, #PageList2, .pagelist, etc) will depend on your template and how many PageList gadgets you’ve added.

How to Centre & Style the Navigation

To centre your navigation, add the following code above </b:skin> to Template > Edit HTML. For more styling code check out this basic navigation tutorial.

/* Centre Navigation */
.tabs .widget li, .tabs .widget li{ display: inline; float: none;} 

Some templates may need this instead

/* Centre Navigation */
.tabs .widget li, .tabs .widget li{ display: inline-block; float: none;} 

or this

/* Centre Navigation */
.tabs-inner .widget ul { text-align: center;} .tabs .widget li, .tabs .widget li {display: inline-block; float: none;} 

Gap above navigation

To remove Blogger navigation bar, go to Layout > NavBar and turn it off. You’ll be left with a blank space. To remove this gap go to Template > Edit HTML and above ]]> </b:skin> add the following

body .navbar { height: 0px; } .content-inner { padding-top: 0px; }

Elements losing styling/CSS when moved above header

Occasionally, putting certain elements above the header will remove the CSS associated with it. Here’s a solution to that. In the layout tab drag your header, navigation and any other gadgets down a little. It will jump to the second level, this shouldn’t affect the look of your blog (as in it will still appear at the top) but it will keep the styling. This image will hopefully explain that better.