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

Socialize It →

Tweet

74

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. 

"Sticky" Floating Navigation Menu (DEMO)

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

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