Why To Add Sticky Navigation Bar in Your Site?
It is extremely frustrating when we have to scroll back to top in order to navigate to other pages. Sometimes, a person gets so annoyed that without any further delay, he leaves the website. However, by adding a scrolling Navigation bar it would allow users to take a long breath and read your content without facing any problem whatsoever. Furthermore, it is extremely light-weight so it would not affect your site speed.
How and Where the Sticky Navigation Bar Would Appear?
There is no rocket science behind the appearing of this widget because it would appear at the top of your website just above your Header. To clear your concept, we have attached a screenshot below. Look at the Following screenshot.
How To Add Sticky Navigation Bar in Blogger?
In order to implement this tutorial, there is no need to learn anything. Just follow the following instructions and it would work quite impressively.
Go to Blogger.com >> Template >> Edit HTML >> Proceed.
In the template Search for StyleSheet ]]></b:skin> Tag and just above it paste the following CSS Coding. To Change the color of Hover effect then from the following coding Replace #1bc4de with your personalize Color Code.
/*--MyBloggerLab Sticky Navigation Bar--*/#MBL_wrapper .MBL_social_wrapper{margin-top: 15px;}#MBL_wrapper{width: 100%;margin: auto;background: #fff;height: 50px;border-top: 5px solid #2c2f32;border-bottom: 1px solid #EBEBEC;-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);position: fixed;z-index: 999;}#MBL_wrapper .topmenu.notice{float: left;width: 500px;margin-top: 15px;color: #fff;}#top_menu a{color: #fff;}#top_menu{display: block;float: left;list-style: none;margin-top: 12px;}#top_menu li{display: inline-block;margin-right: 15px;font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;font-size: 14px;text-transform: uppercase;}#top_menu li ul{display: none;}#boxed_wrapper{width: 980px;margin: auto;}.MBL_standard_wrapper{width: 960px;margin: auto;}.MBL_standard_wrapper.wide{width: 980px;}.MBL_standard_wrapper.header{margin-bottom: 0px;}.MBL_social_wrapper{width: auto;float: right;}#menuforall .MBL_social_wrapper{margin-top: 15px;}.MBL_social_wrapper ul{list-style: none;}.MBL_social_wrapper ul li{float: right;margin-left: 5px;}.MBL_social_wrapper ul li img{width: 24px;}#MBL_menu_wrapper{width: 930px;height: 50px;padding: 0;margin:auto;}.mainmenu.notice{float: left;width: 600px;padding: 17px 0 10px 12px;z-index: 999;}#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav{list-style: none;display: block;float: left;margin: 0 23px 0 5px;width: 700px;}#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li{display: block;float :left;margin: 0;}#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul{display: none;list-style: none;background: #000;position:absolute;padding: 0;margin-top: 51px;width: 200px;height: auto;z-index: 1000;padding-top: 5px;border-bottom: 5px solid #000;border-left: 0;}#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul{margin-left: 200px;margin-top: 5px;}#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a{background: none;}.main_nav li ul li{width: 100%;}#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a{color: #fff;display: block;width: 188px;font-weight: bold;line-height: 1em;padding: 10px 0 10px 12px;background: none;}.main_nav ul, .main_nav{list-style: none;margin: auto;width: 600px;height: 50px;z-index: 999;float: left;border-left: 1px solid #EBEBEC;}.main_nav ul li, .main_nav li{display: block;float :left;margin: 0;}.main_nav ul li a, .main_nav li a{display: block;float :left;margin: 0 0 0 0;padding: 18px 15px 14px 15px;color: #2c2f32;font-family: 'Patua One';text-transform: uppercase;font-size: 13px;font-weight: 500;border-right: 1px solid #EBEBEC;}.main_nav ul li ul li a, .main_nav li ul li a{width: 165px;padding: 7px 19px 7px 16px;border: 0;font-size: 12px;font-weight: normal;color: #ccc;font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;}.main_nav ul li ul li:last-child a, .main_nav li ul li:last-child a{border-bottom: 0;}.main_nav ul li a:hover, .main_nav li a:hover, .main_nav ul li a.hover, .main_nav li a.hover, .main_nav ul li a:active, .main_nav li a:active, .main_nav li.current-menu-item a{color: #fff;background: #1bc4de;}.main_nav li:last-child a:hover, .main_nav li:last-child a.hover{border-right: 0;}.main_nav li ul li a, .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,{display: block;width: 170px;line-height: 0.7em;padding: 5px 0 5px 30px;}.main_nav li ul li a:hover, .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover, .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover}div{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}a{color: #2C2F32;text-decoration: none;-webkit-transition: color .2s linear, background .1s linear;-moz-transition: color .2s linear, background .1s linear;-ms-transition: color .2s linear, background .1s linear;-o-transition: color .2s linear, background .1s linear;transition: color .2s linear, background .1s linear;}/* Font Face ----------------------------------------------- */@font-face {font-family: 'Patua One';font-style: normal;font-weight: 400;src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');}ul{margin: 0;padding: 0;list-style: none;}
Again in the template search for <body> and just below it Paste the following HTML Coding. However, if anyone is unable to Find <body> tag then, look for <body> tag and below it Paste the Following Coding. Don’t forget to replace all Hashes (#) according to your desire needs.
<!-- Begin Navigation -->
<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>
<a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise Here</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='htto://www.mybloggerlab.com'>MyBloggerLab</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn3sjMAgOwf01oPU8RplDW_ifErmHQxW2MeF_Pq99asrTw6HDYm_S7WHfzgaF6n2JTCA9GpR2CJUJ5pWB_pavHGZV6QeVOMSrtocI-9OwtezaEXKYqzbN-VCCkYWSLbFR32REGKTyr0jWN/s1600/facebook.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjKJqJ5LcyS6PMjbnOY_DKtYDxdbDKnFVdcdOsM6MTqo-r3k3UxjpzUMhxDqCpK7skHFZX1XCAjS-27ylZRY2s26n6Zd5aH4S0fVsdINRLf1TmA7X_Fw2LLuQZu0nfnqmacXJAlrp2B-ue/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8om3eFoKYS7is73CTYcCcB4U-aVsnOQkwzDn92xpOWr1RR_-Uy7pYJH1BD21YaA5Uc6bmpI-D_yE9Tn92fiuHsxKnJBNe19mZS-kOoyt_2idbR3UIYi98-eUbNFh5b9-6t1gnfXzoaDFh/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge88nGaTMASEBB25G7XfP43logfeIiFKUpIrxVzND4nHT47oFIFCvdqqSDvnP4P-JFllAxShfqKDfMeiCqHSPPyPxtH1yM7mQozEDuLG_FKHnuWdE35amEs3u1lZ3h8p1G9TzLf62OHXqx/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD0VwovBqbDZQFJsPNZ0wHfeAITSpqzYGmkwAiugzFMRNuz1rKZnFr2DnMW2VSMuQ7S7hxNUi_RAF8nN3sL1c7QVFGYUyTKRUSOX2C8fmhwT0cPyaAREKeU6yunGkp2lrYa8TmcbU7fSSp/s1600/tumblr.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGhXIngiO0Cv-QBKlu1f4c8qkQMVhjCQjlcICB2mAhmyWYNVqU52nenGTOYhrWdfmYOWdgBxJQKCzGgqR8IfDqk_jky5iTWM8SjyEA1i4HoFR7ScuTMGFmZoymn0tDMXK4QS0E9CfsiJS7/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZoQFNX6-Cytss_Az5ivNDA6eRRBkwso5Z59bs_It2rN75And_HC7SFa7XpUBT4gyh4YW86rtdqtUMwG4AlswB4iXrJjQT0SvUsptxoTlu1g6-ha1WS9rEVpBgk8M8Xsq2AF3JQe6yeAYm/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb41_OMPiEQ9wvkIYTp1tBfeij79QWO47esTBWeZ9jnVXgy93Llto9dhFZWOf0NMI17nSIeNtUYJfrnuiCCiLlBtIoRavN13ySSwsBxd0VW-XiXxPH3Nqgdl6ECs38A4s9xYBeZpgcZa1/s1600/digg.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUYfhs8bbo5qE1PO60-mwjHfouQJ36c3fIMbmdT1YUC8bAwTC9lITLtDv14ErKfHSTtIunj59VurRTforiHzYQjt__uZUwfSmehNa7fugwOqpIhZLwAbP-4UjnvjXDXX_UD_BI5O_KNvfk/s1600/linkedin.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmyLtJjf3XN1ViROIiSBSDCoiGaanUrGlWmUhMAF6tCjQPOKCbJDvsquaKJ5hYzh0M4XfS0VF5AkWwjZCxNqcBfaFoIQTJG0yUrkb85SQSm5Xgx70gMaarVSqaccY-kg1WxCKzAToELDF1/s1600/pinterest.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrfUBbW6AeLHQ_WE1dZISWJCfYkivWoUBDuCvjOlMceWJwMbvlLBjaIXEucq0ELDh2V1qX8PRkS_LpU-F_JwYwhACQI2L62r8nAZ6A_2G4KUL_118l50DwyrLamdG3rRnWGJF9IpBS166/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>
<!-- End Navigation -->
All Done: After customizing, save your template by pressing “Save Template” button. If anyone has any query or difficulty then, feel free to leave a comment below we would love to hear you.
From The Editor's Desk:
Hope that Floating Navigation Bar would amuse your visitors. After adding this gadget, this floating Bar might overlap your Header section Area. To resolve this just add margin-top:50px; in the CSS of your Header-wrapper and it would stop overlapping your header. What are your thoughts about this gadget? Suggestions would act as a piece of Gold. Take care till then, Peace, Blessings and Happy Floating.
About the Editorial Team
The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).
74 comments
Yap Raheem! Indeed its a great idea to integrate a LOGO with these Floating Navigation. It would surely give a nice Look to a Theme. Therefore, Visitor would fancy there chances while Checking it. Thanks, we would work on it ASAP. Peace and take care buddy!
i dont understand.. where place to replace "CSS Coding" i mean above what code?
We have Updated the Tut. Add CSS coding above skin tag i.e. ]]></b:skin>
How to add dropdown navigation in this menu item?
Hello , Please Can you Give me the template of the Demo site?? Plsssss !! I Really Love That ! Please Reply Here If you wanna Give me ! if you wanna give me then Email Me pls.
Tblogger: That is my blog GeekTen and thanks for liking my blog design, here is your template. http://goo.gl/lF8Wg
Dude. Its too cool. But there is a error. A little gap is appearing in my website between top and toolbar. Please help me to remove that or make it opaque. Check my site : www.mypremiumtricks.com
Nice.. was waiting for this since so long, tried to edit the floating scrolling bar but it did not work..
I have a question regarding this that if we change the htmll coding that was suppose to be placed under tagg to our desired menu, will it work ?
We can't see the Sticky Nav on your Site.
This Sticky Nav Bar Doesn't Supports Drop Down Menus.
You can Change the HTML but make sure that the CSS Div IDS and Classes Remains the Same. Peace
Hi there, it's not working properly. Please see: http://testing8882.blogspot.com/
Also, is it possible to make it fixed where the orange bar with the button "Home" is?
thanks!
Well, this error is of your theme. It is overlapping the menu.
Its not working on my blog blog theme is " picture window from blogger "
Please help i really need this widget :]
thanks hope you will reply soon
Please Provide the URL so we can help.
well thanks for your reply and now its working :D actually i placed the code above <body mobile something . :P
and i placed below it now its working :]
Thanks for providing this
We are glad that it worked for you :)
Justo estaba buscando este codigo para implementarlo en un proyecto blog, Saludos de Perú Sudamerica. Gracias - Que tengas un excelente dia. bye
We are Pleased That You Enjoyed the Tutorial And Greetings to Peru South America :). Peace
Hey thanks a lot for that i'll surely put this effect on my blog
hello,
can you please help me break the separation of the menu are your users? I'd TAP 8, Episode 9, Episode 10, ...
Would you please look here and help.
http://giadinhgieogiong.blogspot.com/
Email: giadinhgieogiong@gmail.com
Can you Please define your problem clearly :)
xin Invitation web: http://giadinhgieogiong.blogspot.com/
I am you want to grow more labels TAP 8, 9 TAP, TAP10, TAP 11.
xin lam on help me. Thank.
giadinhgieogiong@gmail.com
Go to Blogger.com >> Template >> Edit HTML >> Search for this Coding.
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li>
Once you Find it Just below it Add the Following Coding
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 9</a></li>
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 10</a></li>
<li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 11</a></li>
Hope that Helps. Peace
Thanks for your help,
But I want the width of the menu TAP 8, TAP9, TAP 10 to the right of the screen, please help me adjust the width of a right LABEL it locked right not to be.
please take a look to know: http://giadinhgieogiong.blogspot.com/
Go to Blogger.com >> Template >> Edit HTML >> Search for this Coding.
#MBL_wrapper .topmenu.notice
{
float: left;
width: 500px;
margin-top: 15px;
color: #fff;
}
Replace: width: 500px;
With width: 1000px;
Hope that Helps. Peace
has been executed by sự instructions but nothing happen.
I have followed these instructions but not give up the switch to the new Menu.
You must have not followed the instructions correctly. Anyways Take care. Peace
me too has been executed by sự instructions but nothing happen.
Hi Ali.. This is not worked on my blog (www.blogmamen.com. I don't see any different or changing after I applied your css code.
Why?
You haven't added the Last Coding in your Template. I can only See Stylesheet of the Floating Bar
Hi there, love your blog, so many helpful ideas. I've tried adding both sections of code for the bar and I'm not seeing anything appear. I'm wondering if blogger changed something that causes this not to work. Could you check it out please? http://polishetctest.blogspot.com/
I Think you forgot to add the CSS Stylesheet coding. I am unable to Find it on your site. It would not work, until you add both codes properly as mentioned in the tutorial
Just Paste the Code Mentioned in the First Step above the ]]></b:skin> Tag.
it's very nice and worked for me. can you make it placed under the header and it follows the scrolling but when it reached the top of the page, it back to floating? (sorry for bad english)
That's not possible with the current Menu.
I just tried inserting it again and still can't get it to work. I know it's something I'm doing wrong but I just can't figure out what.
Hello guys. I want the floating effect on my navigation menu like your "Join Over 15,000 Blogger User". It sticks some where in the bottom of header, and then follows when scrolled down. Please, help me. This is my blog:http://guild-laskarpelangi.blogspot.com
Thanks so much in advance.
Yes, it does supports! Look my blog on comment below and you help me to stick it below header. THanks so much in advance. :)
How can I hide this floating menu on top of my blog and appears only when we scroll down the window.
For that you have to use an extra Jquery and it would increase your load time plus a lot of customization. We won't recommend you to do that, use the current system.
Can someone help me ? Tested it on my test blog but it doesn't seem to work. http://sharefieldtest.blogspot.sg/
Please reply to me at my email : huang.qf15@gmail.com
Thanks !
Add the HTML Code after <body> it would work just fine
How can I change height of this sticky menu .is this menu can be hide in my header section?
You site URL?
http://techleaps.blogspot.in/
Hi! Thanks so much for your tutorial. It's been the only one I've found to work.
I have it on a tester blog that I use before implementing into my own, but was wondering about a few things:
1. Is there a way to replace the social media icons list with a search bar? If so, can you point me in the direction that would tell me how?
2. How do I change the rollover/hover effect so it shows up with a black link/text instead of the white?
3. Is there a way to make it so that it floats in the center of the page, but at a width of 700px instead of 100%?
4. Is there a way to scrap the hover/rollover styling all together and instead use a graphic/stylized font (Frontage) and then add a dividing image between the buttons? Example of how I'd like it to look: http://i39.tinypic.com/2lt3iq.png
You can see my changes here: http://layouttesterkaelah2.blogspot.com/
Thanks in advance again! This is great!
Great Work
Works great, however I wanna ask is it possible to change the blue color that stay on the 'home' navigation menu? thanks!
Yes you can do it with CSS
It's just great, Now I am using it & it's working. Thank You very very much.
I forgot to mention the link...
It's : http://hemantsonawane.blogspot.in
I tried the above procedure. It isn't working on my blog.
Kindly help!
I want a transparent black strip for the navigation menu background. And in the navigation bar, I need a local search tool too (one that searches only within my blog, not all over the internet!)
I was able to install and customize this navigation bar on my second attempt. Great tool... Thanks!!
My blog is : http://hemantsonawane.blogspot.com
Kindly help in resolving these final few glitches :
1) how to change the font type, colour and size?
2) how to remove the extra margin on LHS?
3) how to add an extra tab to navigation bar?
4) how to add a similar bar fixed at the bottom of the blog without the social bookmarks? (like in your demo blog)
how do I send down my blog title which is covered by this sticky menu?
you should look this http://pelajar-premium.blogspot.com/
not working :( :( :(
Just add this above </head> in your template
<style>
#MBL_wrapper {
position: relative!important;
}
</style>
What error you're facing?
Please Retry, we have updated the code.
but, it becomes not sticky after I added the code above
What should I do?
Its not floating, how to make it float?
Thank you for this tutorial!
The navbar is covering my header and I can not fix this. even though I have changed the "margin-top" number. Please help!
www.pookybanana.com
Just add this to CSS
#MBL_wrapper {
margin-top: -30px;
}
#Header1_headerimg {
margin-top: 30px;
}
Thank you so much!
www.pookybanana.com
Hi, I really love your blog... But how can I create a sticky menu bar with my logo in it, like on www.tmz.com for blogger please. I really need something like that. U can email me jmfuti@gmail.com I really need your help
Hi like this? write to you as I am new to the codes and stuff. Horita'm creating a blog and download a template in which I need to add a submenu template and bring your menu but lacks the submenu, change the color anaranajado that part does that and also add a slider on the side of the head man? . This is my link to my blog http://prueba3rc.blogspot.com/. I attached the code template beforehand thanks
https://drive.google.com/file/d/0B2Kw4BvKAqssZFdnamROUm8yem8/edit?usp=sharing
Beforehand thanks
I used this script but did not work for down menu. what script i will add? Thanks
when i search for < body > no result will shown
Search for <body
I dont have a ]]> tag... where do I post this?
Hi Natashia,
It is not possible that your template does not have ]></b:skin> tag. You have to Locate it in the template.
1.Go to Blogger >> Template >> EDIT HTML >>
2.Click anywhere in the Template editor
3.Now press CTRL+F >> now a search bar within the template editor will appear
4. Search for the tag, and I am sure you'll find it.
Cheers
Ok found it... now i cant find the body tag... I tried the varitation too.. why am I not able to find these... smh
i have not working in this blog http://www.apkmovies.com/
Hi I have a problem, I try to find a solution about the total width of the sticky Floating Navigation Menu. On the left side it not fit it has one small empty space. Check my http://kaltest3.blogspot.gr and you will understand.
Please reply one solution about it.
Thanks,
Kalaitzaki
you rock Applied it to : http://www.codenlearn.com
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.