How often you see navigation bar starts floating on top of any site some site make it fix forever and some site make it appear after you scroll down the page, These days every blogger want to use this style on their template because its looks professional and every pro blogger using it and this technique also allow you to keep showing the categories or other services that hide after visitor scroll down that is why we created this post to show you the technique in which you can make your existing navigation menu fix on top when someone scroll down you can also adjust the height of scrolling before the menu start floating.
If you want to create new sticky navigation bar it’s also easy but it might look different than your template so if you don’t want to change then you should use our code with the template you want. The procedure is very simple and self-explained you don’t need to add another navigation menu as I said if you like your own just follow our simple tutorial.
Also read this: we have also written a tutorial on Facebook like & subscription pop up box it’s also good for increasing email subscription and Facebook like you must add that too on your blogger blog if you haven’t.
I am assuming you know little bit of html and css the procedure is simple but you need to know where is your navigation bar in the template. If you know that much of html then everything will be easy for you just follow the tutorial step by step.
If you want to create new sticky navigation bar it’s also easy but it might look different than your template so if you don’t want to change then you should use our code with the template you want. The procedure is very simple and self-explained you don’t need to add another navigation menu as I said if you like your own just follow our simple tutorial.
Also read this: we have also written a tutorial on Facebook like & subscription pop up box it’s also good for increasing email subscription and Facebook like you must add that too on your blogger blog if you haven’t.
Make Your Navigation Menu Bar Fixed After Scrolling
- Login to blogger and select your blog
- Go to Theme and click Edit HTML
- Search for </head> and copy paste the jqurey code above it
- Now search your navigation bar div in my case its naving your template might have named different
- As you can see i have highlighted the code which you have to add after starting of navigation div and closing div before it ends the code is written below it's the most important part make sure you don't make any mistake
- After adding the code in the existing navigation bar now find your css of navigation div in my case its naving
- just add the .scrollingBox thats it
<script src="http://code.jquery.com/jquery-1.11.0.min.js"/>
<script type='text/javascript'>
$(function() {
// Set this variable with the height of your sidebar + header
var offsetPixels = 500;
$(window).scroll(function() {
if ($(window).scrollTop() > offsetPixels) {
$( ".scrollingBox" ).css({
"position": "fixed",
"top": "0"
});
} else {
$( ".scrollingBox" ).css({
"position": "static"
});
}
});
});
</script>
<script type='text/javascript'>
$(function() {
// Set this variable with the height of your sidebar + header
var offsetPixels = 500;
$(window).scroll(function() {
if ($(window).scrollTop() > offsetPixels) {
$( ".scrollingBox" ).css({
"position": "fixed",
"top": "0"
});
} else {
$( ".scrollingBox" ).css({
"position": "static"
});
}
});
});
</script>
Note: you can change offsetpixels as you want to make the navigation appear after scrolling that much of pixels
<div class='scrollingBox'>
</div>
</div>
Hey Friends
4 comments
hi im using the elice theme. and i cant find the 2 second step of your instructions
how to make this sticky menu to center
Comment your suggestion, problem or Question