Sticky Floating Navigation Menu for Blogger

Sticky Floating Navigation Menu

• What is Sticky Floating Navigation Menu

Sticky Floating Navigation menu is simply a navigation bar but when you scroll your page it didn't get scrolled. So, it  become easy for visitor to navigate to other page directly instead of scrolling up and then navigating. 

• How to add Floating Navigation bar

To add Floating Sticky menu bar in blogger, follow following steps:

• Go to Blogger➟Template➟Edit template and Proceed
• Find ]]></b:skin>
• Paste following code before it.

/*--allin1web Sticky Navigation Bar--*/
#aiw_wrapper .aiw_social_wrapper
{
margin-top: 15px;
}
#aiw_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;
}
#aiw_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;
}
.aiw_standard_wrapper
{
width: 960px;
margin: auto;
}
.aiw_standard_wrapper.wide
{
width: 980px;
}
.aiw_standard_wrapper.header
{
margin-bottom: 0px;
}
.aiw_social_wrapper
{
width: auto;
float: right;
}
#menuforall .aiw_social_wrapper
{
margin-top: 15px;
}
.aiw_social_wrapper ul
{
list-style: none;
}
.aiw_social_wrapper ul li
{
float: right;
margin-left: 5px;
}
.aiw_social_wrapper ul li img
{
width: 24px;
}
#aiw_menu_wrapper
{
width: 930px;
height: 50px;
padding: 0;
margin:auto;
}
.mainmenu.notice
{
float: left;
width: 600px;
padding: 17px 0 10px 12px;
z-index: 999;
}
#aiw_menu_wrapper .nav ul, #aiw_menu_wrapper .nav
{
list-style: none;
display: block;
float: left;
margin: 0 23px 0 5px;
width: 700px;
}
#aiw_menu_wrapper .nav ul li, #aiw_menu_wrapper .nav li
{
display: block;
float :left;
margin: 0;
}
#aiw_menu_wrapper .nav ul li ul, #aiw_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;
}
#aiw_menu_wrapper .nav ul li ul li ul, #aiw_menu_wrapper div .nav li ul, .main_nav li ul li ul
{
margin-left: 200px;
margin-top: 5px;
}
#aiw_menu_wrapper .nav li ul li a, .nav li ul li a, #aiw_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%;
}
#aiw_menu_wrapper .nav li ul li a, #aiw_menu_wrapper .nav li.current-menu-item ul li a, #aiw_menu_wrapper .nav li ul li.current-menu-item a,#aiw_menu_wrapper .nav ul li ul li a, #aiw_menu_wrapper .nav ul li.current-menu-item ul li a, #aiw_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,#aiw_menu_wrapper .nav ul li ul li a, #aiw_menu_wrapper .nav ul li.current-menu-item ul li a, #aiw_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, #aiw_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #aiw_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;
}

• Now search <body
• Paste following code just below/after it.

<!-- Begin Allin1-Web Navigation -->
<div id='aiw_wrapper'>
<div class='aiw_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.allin1web.com'>allin1web</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='aiw_social_wrapper'>
<ul>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ_TDynQ5eQUqpLYyAaN4J6oTamJd8XwSdqC1dj2INh6KfF-smAOd8GsxRMD3a2p97e3Qj8GETAIgeYDAuQllApgtjXda28ENcfzWkNo0SeulOtMLc1KVKbhvhPyD-sxlnAGVRPPWGDEff/s1600/facebook.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkCilIqayNjN0AYteRSJXmo4qMzur8uUAUKCGQW4RAcEsEOJCTu_3RNkJhOIrtMTlypShy2Igc3QYiSk2A89kLHNMNcDUhahOg_TKq-mbzo23qSDEkllzcQNizs-iIHl0Qpt6hsnAc1PYA/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwtq4d3j7PzsqPQEJ3OAXksDwGeI4navgn6SmWdW-akj8dY3otSNXgHW0POBTPy__n1GGVeBin8q0tsPlUtj3FhD0Z70LJ2O4__qPoW0M3dMMWPIGNE08v3dhFWM3BQfkFe9S-kflHlfsF/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcPoGivwSzqZ-nmzfWFi86TD5BEtaCgUXbQNApv6AzjKAW2u779ndDaBZ3OkPhlrUMMBVmeO2u_ZgOrJDBb6ZEjjr1f22oKcb-Uoe8AyyyTdJeH0rG0I7_hyphenhyphen7e_XNYN-AKXwfhjbyOnG2w/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tuaiwr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-11TxJKBYXfAS2s0S3dQ1GlLTmtcUAquxFCz3zumtCvrkeeEeiYYSHi1YWOP6B4R3vah1Kg44rdRr1TU0NqflsmBApd1oteNT1L_cmf10B_Mf3-hJK5xRa7iI88RyFyFLwliwfRDVd_q/s1600/tuaiwr.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYks6Cg8tM4jY7k1XYQg8w3IVIOulvO57Nv_06uRB47WREqoBDzPxx7kLk19LuKG_dGJ7QL1qTBYFHztpZWdjYuSaxIZInzxs_GpRzMccpiRylwmS-FuGEngmodS5uC-bq3fUgLQYPa6-r/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMxV5_kuoEX8jtw2W4IRPSxaQ2dcAuAOkKBBU7hB-nnxfP2En415lmBO3IgPghckmXmqNC3HDrvbZK1ADndisY8hlYIzwaTnnQgOCsIJd1NmE-g2dRmtpDZxVoc6eJ2HuhOFBDXdpGyEB/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1tixgPqMb9CI2Rt5oZC0S5ZV6F5HBHYKMCxq08RRTlCB_J2NIIVTiOhobHs0XgTYAV3bjOxo5uHIve2gk8oBCoFhHE285y4xuYSKBey3fjXpHN186iDxXDN-2Vrk3K9b9Is6TCpVz160/s1600/digg.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpPzRWz4TuroBFDVuLF-WX6Ez_PikG-IMUY0YfrhAsUMVxTdvEe-enBYmloEAo_iB9LhXcGRAASCRoXw2OVcp7L60yOlcBmfrm_7kgLn57lak4cHxOLkcPzQ3UBPQeRyKYNlWLKlY6BaMR/s1600/linkedin.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6IXISEYEJ-7nqnRKmg1CZ6HpV1_NDKAGny7Ga6lio4OGouMQNpAIFClyV-xGJWozvfsk5V3215fm7JpqjR8QuKVspsEs6LZVrIlcATfu5uthRhdGqe9RMX1UJpoUjnZoLhmJbn-rqkNj0/s1600/pinterest.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEWbyn2ws3r2ITaxKdxcxBWtvKkgqrDzMC9QMeZcbaH_g1R0of1lZpLPyuoxlyTWWFRmxBLdU5yY4qPGBtIbI8UJ0qXNJbaP8kSBSbIeN7g8fDbASLG3QDPgqRG7xI15bmFFuHG_6LSN2K/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>
<!-- End Allin1Web Floating Navigation -->

• Click on Save template.
• Done.See your blog