How To Create a "Sticky" Floating Navigation Menu in Blogger

Advertisements
Are you tired of your laborious Navigation bar and would desire to refurbish it with something that could amuse your visitor? Navigation bar is deliberated as the core element of a website because it represents the complete outlook of a website. Navigation bar has most prominent information about that helps users to navigate throughout the website. As we all are well aware that Navigation bar appears at the top of a website, so users have to scroll back to top in order to navigate to different pages. Furthermore, probabilities are bit high that users might get frustrated and straightaway leave your website. For that reason, it is crucial to have a “Sticky” Navigation bar that floating along whenever someone Scroll up or down the page. In This Article, we will Learn How To Create a Floating “Sticky” Navigation bar in Blogger. 


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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

74 comments

Editorial Team MOD
December 27, 2012 at 11:56 AM

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!

IM
December 27, 2012 at 1:54 PM

i dont understand.. where place to replace "CSS Coding" i mean above what code?

Editorial Team MOD
December 27, 2012 at 2:24 PM

We have Updated the Tut. Add CSS coding above skin tag i.e. ]]></b:skin>

December 27, 2012 at 4:54 PM

How to add dropdown navigation in this menu item?

December 27, 2012 at 9:05 PM

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.

December 27, 2012 at 10:18 PM

Tblogger: That is my blog GeekTen and thanks for liking my blog design, here is your template. http://goo.gl/lF8Wg

December 28, 2012 at 1:32 AM

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

December 28, 2012 at 4:25 AM

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 ?

Editorial Team MOD
December 28, 2012 at 7:00 AM

We can't see the Sticky Nav on your Site.

Editorial Team MOD
December 28, 2012 at 7:00 AM

This Sticky Nav Bar Doesn't Supports Drop Down Menus.

Editorial Team MOD
December 28, 2012 at 7:01 AM

You can Change the HTML but make sure that the CSS Div IDS and Classes Remains the Same. Peace

Anonymous
December 28, 2012 at 11:10 AM

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!

Editorial Team MOD
December 28, 2012 at 12:13 PM

Well, this error is of your theme. It is overlapping the menu.

December 29, 2012 at 10:55 AM

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

Editorial Team MOD
December 29, 2012 at 10:56 AM

Please Provide the URL so we can help.

December 29, 2012 at 11:11 AM

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

Editorial Team MOD
December 29, 2012 at 11:20 AM

We are glad that it worked for you :)

Anonymous
January 2, 2013 at 5:18 PM

Justo estaba buscando este codigo para implementarlo en un proyecto blog, Saludos de Perú Sudamerica. Gracias - Que tengas un excelente dia. bye

Editorial Team MOD
January 3, 2013 at 2:13 AM

We are Pleased That You Enjoyed the Tutorial And Greetings to Peru South America :). Peace

January 3, 2013 at 11:39 PM

Hey thanks a lot for that i'll surely put this effect on my blog

January 14, 2013 at 11:27 AM

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

Editorial Team MOD
January 14, 2013 at 11:28 AM

Can you Please define your problem clearly :)

January 14, 2013 at 11:34 AM

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

Editorial Team MOD
January 14, 2013 at 11:42 AM

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

January 14, 2013 at 5:30 PM

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/

Editorial Team MOD
January 15, 2013 at 12:16 AM

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

January 15, 2013 at 4:41 AM

has been executed by sự instructions but nothing happen.

January 15, 2013 at 4:43 AM

I have followed these instructions but not give up the switch to the new Menu.

Editorial Team MOD
January 15, 2013 at 5:59 AM

You must have not followed the instructions correctly. Anyways Take care. Peace

February 21, 2013 at 10:30 AM

me too has been executed by sự instructions but nothing happen.

March 4, 2013 at 7:29 AM

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?

Editorial Team MOD
March 4, 2013 at 7:47 AM

You haven't added the Last Coding in your Template. I can only See Stylesheet of the Floating Bar

March 20, 2013 at 4:40 PM

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/

Editorial Team MOD
March 20, 2013 at 5:54 PM

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.

March 21, 2013 at 1:33 AM

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)

Editorial Team MOD
March 21, 2013 at 2:20 AM

That's not possible with the current Menu.

April 16, 2013 at 10:02 AM

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.

April 19, 2013 at 5:33 PM

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.

April 19, 2013 at 5:37 PM

Yes, it does supports! Look my blog on comment below and you help me to stick it below header. THanks so much in advance. :)

April 25, 2013 at 9:25 AM

How can I hide this floating menu on top of my blog and appears only when we scroll down the window.

Editorial Team MOD
April 25, 2013 at 1:16 PM

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.

April 27, 2013 at 11:20 PM

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 !

Editorial Team MOD
April 28, 2013 at 10:09 PM

Add the HTML Code after <body> it would work just fine

April 30, 2013 at 9:07 AM

How can I change height of this sticky menu .is this menu can be hide in my header section?

Editorial Team MOD
May 1, 2013 at 11:28 AM

You site URL?

May 2, 2013 at 10:37 AM

http://techleaps.blogspot.in/

May 6, 2013 at 10:45 AM

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!

Editorial Team MOD
May 8, 2013 at 12:43 AM

Great Work

June 6, 2013 at 1:29 PM

Works great, however I wanna ask is it possible to change the blue color that stay on the 'home' navigation menu? thanks!

Editorial Team MOD
June 7, 2013 at 12:10 PM

Yes you can do it with CSS

June 29, 2013 at 3:29 AM

It's just great, Now I am using it & it's working. Thank You very very much.

July 8, 2013 at 10:04 PM

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!)

July 9, 2013 at 2:29 AM

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)

October 12, 2013 at 11:21 PM

how do I send down my blog title which is covered by this sticky menu?
you should look this http://pelajar-premium.blogspot.com/

October 14, 2013 at 4:52 PM

not working :( :( :(

Editorial Team MOD
October 14, 2013 at 4:59 PM

Just add this above </head> in your template

<style>
#MBL_wrapper {
position: relative!important;
}
</style>

Editorial Team MOD
October 14, 2013 at 5:36 PM

What error you're facing?

Editorial Team MOD
October 14, 2013 at 5:39 PM

Please Retry, we have updated the code.

October 15, 2013 at 2:11 AM

but, it becomes not sticky after I added the code above
What should I do?

October 16, 2013 at 12:50 AM

Its not floating, how to make it float?

February 10, 2014 at 4:54 AM

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

Editorial Team MOD
February 10, 2014 at 11:10 AM

Just add this to CSS

#MBL_wrapper {
margin-top: -30px;
}

#Header1_headerimg {
margin-top: 30px;
}

February 11, 2014 at 1:38 AM

Thank you so much!

www.pookybanana.com

June 21, 2014 at 3:31 AM

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

July 24, 2014 at 3:39 PM

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

September 21, 2015 at 6:05 PM

I used this script but did not work for down menu. what script i will add? Thanks

November 9, 2015 at 9:35 AM

when i search for < body > no result will shown

Editorial Team MOD
November 12, 2015 at 7:13 AM

Search for <body

Anonymous
January 19, 2016 at 8:33 AM

I dont have a ]]> tag... where do I post this?

Editorial Team MOD
January 19, 2016 at 8:44 AM

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

Anonymous
January 19, 2016 at 9:00 AM

Ok found it... now i cant find the body tag... I tried the varitation too.. why am I not able to find these... smh

April 23, 2016 at 11:55 PM

i have not working in this blog http://www.apkmovies.com/

May 19, 2016 at 12:34 PM

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

July 14, 2016 at 8:39 PM

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.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.