The most common email I receive is from Blogger users wondering how to make their navigation menu float while the user scrolls down the page.
This can be super handy and add to your user experience since the visitor won’t have to scroll all the way back up to the top of the page to see your menu links.
Method 1: Menu at Top of Content
The first and easiest way to do this is to simply position your navigation menu at the very top of the page and allow it to stay in a fixed (floating) position as the user scrolls down.
Keeping your menu at the very top of your page will avoid having to add any JavaScript, so if you aren’t comfortable with editing your blog’s code, then this is the method for you!
Here is an example:
Make sure you have added the Blogger “Pages” widget to one of the header areas in your Layout page (either the Cross-Column or Cross-Column2 widget spaces).
Then, follow the steps below:
1. Navigate over to the Template > Customize page.
2. Select Advanced from the side menu then Add CSS
3. If you’ve already inserted custom CSS in this box, scroll down to the very bottom of your code
4. Add the following CSS code to the box:
/* Blogger floating menu by icanbuildablog.com*/
#navbar {display:none}
#PageList1 ul {
position:fixed;
top:0px;
z-index:1000;
background-color:#ffffff;
width:100%;
max-width:1100px;
}
.content-inner {
margin-top:30px;
}5. Change the “max-width” variable to the overall width of your own blog content area.
You can find the width of your blog by going over to the “Adjust Widths” section and viewing the number in the “Entire Blog” area.
6. The “margin-top” variable should be the height of your navigation menu.
You can leave it as is if you haven’t modified your Blogger Pages menu.
7. You can also change the background-color variable to a hex color code of your choice.
Right now it is set to white.
Method 2: Menu Below Header
The second method is for menus that are positioned below the header image or not positioned directly at the top of the screen (LIKE THIS).
For blogs designed this way, you’ll want the menu to stay in its desired position at first, and then float in place as the visitor scrolls past where it’s settled.
Here is how to achieve that:
1. Navigate over to the Template > Customize page.
2. Select Advanced from the side menu then Add CSS
3. If you’ve already inserted custom CSS in this box, scroll down to the very bottom of your code
4. Add the following CSS code to the box:
/* Blogger Floating Menu by icanbuildablog.com */
#navbar {display:none}
#PageList1 ul {
height:30px;
background-color:#ffffff;
width:100%;
max-width:1100px;
z-index:1000;
}5. See steps 5-7 above
6. Save your changes and navigate to the Template > Edit HTML page
7. Right before </head> in the code, paste the following code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<!--Blogger Floating Menu by I Can Build A Blog.com-->
<script type='text/javascript'>
//<![CDATA[
$(function() {
var nav = $('#PageList1 ul');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
//]]>
</script>8. Save your changes and view your page!
Note: If you have problems with the menu not doing what it should, it could be a matter of having duplicate jQuery scripts in your blog code.
Try removing the first line of the code (shown again below) and saving:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>I hope this guide was helpful and that all of your questions were answered about creating a floating Blogger menu!
