Why To Add Sticky Navigation Bar inwards Your Site?
It is extremely frustrating when nosotros receive got to scroll dorsum to travel yesteryear inwards lodge to navigate to other pages. Sometimes, a somebody gets thus annoyed that without whatever farther delay, he leaves the website. However, yesteryear adding a scrolling Navigation bar it would permit users to receive got a long breath as well as read your content without facing whatever work whatsoever. Furthermore, it is extremely light-weight thus it would non behave upon your site speed.
How as well as Where the Sticky Navigation Bar Would Appear?
There is no rocket scientific discipline behind the appearing of this widget because it would appear at the travel yesteryear of your website only to a higher identify your Header. To clear your concept, nosotros receive got attached a screenshot below. Look at the Following screenshot.
How To Add Sticky Navigation Bar inwards Blogger?
In lodge to implement this tutorial, at that spot is no require to larn anything. Just follow the next instructions as well as it would operate quite impressively.
Go to Blogger.com >> Template >> Edit HTML >> Proceed.
In the template Search for StyleSheet ]]></b:skin> Tag as well as only to a higher identify it glue the next CSS Coding. To Change the color of Hover number as well as thus from the next coding Replace #1bc4de amongst 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 corporation #2c2f32;border-bottom: 1px corporation #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 corporation #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 corporation #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 corporation #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 inwards the template search for <body> as well as only below it Paste the next HTML Coding. However, if anyone is unable to Find <body> tag then, expect for <body> tag as well as below it Paste the Following Coding. Don’t forget to supervene upon all Hashes (#) according to your wish 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/AVvXsEiVsvII_7ZPw1Clcujun4TkrEyp55dFv5lcj0FmST4GnK8hpK0ZlYO8oMrWtox5wOISNFKlaL1DxCZz5_auLlC13HU00nyC7ukY-2FZuCLwafjM5DiMhD0urQN3DiRr2nydjOBlJwddy1Vh/s1600/facebook.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6n3R_grfvs-0OrJ5OtZ6Dz3NWQD9Yr6A4Nfn4SZ9KX3nSnLjizhRCjM5Kxj3iXnlmw3xpLJuJ6O9N5o7tmg9jcTpFu_Xq4952BeZO-qah8YavLPZ18rPaoaS336cmrwhIl2nDhm7fkvNP/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPM4OJVIVIzJXyjfUXa81arSw9lfmC4sx1NoCB5gT_Rkjk6BePnO5DKn7jKeSJHaVyu4-9_Qc81_vNC9NkhtdtiO7pPOU21TlijOGM4aHa0-JjiN99met8ME3jSIPLVKum1uLopUPkuWk/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxoX_y4oNJNfUEzSrE1PivM1OkpAji3EDggTVi7fzpum53ClWZ75lBmK7Q4IH_YJ6ND8bmj7HAkPuhkPsAgThGfp-NBh2MqCdfE6QQm72SzCHI0VNGixapx8Fxd1Su9FE_bx5_Cp0v4uc3/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyZI6Lkfy6nEUlmrcoJXgHk2a9pXyZBQc-MWwH2LH_IwWNe0tJueJvDpaonfyNgDG2mFrhw5bKWLVIhWQY4Mkh3MgTBdJzLrd2Xlg-8O74_bDTM8uCN1oBIyLTFdbXtI5dKPNhX41G7W6D/s1600/tumblr.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFSfy-7sNrbKh7XTgNV3uT4VJPlRg5dZ_oPdpiDskKd3iXFgDxshaNsu5J5O2pg7YLREbK835T-O__WB95T_02p_lL22c2M7t6fnYwc-Nj6LnKVagjeFUVHagESrc5gN3BXiajha0yIFii/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi11wfDeirn8y0EbzhU2HLHUStmedjyYC7qRIFkWa245Gn3AXs4FHVF9rp3ycQ-1s7KpGTwhb2H_mNedchnl9BTtwZOTaUH_mDXKOkY_3iilxLqkWWr6rPFNJ7hnSQWWUqEIC-bgKCI36C0/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgdRnSSETpHRfM9UZoSThIf1SQSQABCXkGzXndUpCmoDo0Rlxc_iHW1LTg6U1PAS-pH_HUSiA0N09cmFAsSdvT0DG0eimVG-zI_xTpJ-dhAU7zPsi0ShTZB_HSMR1g7AITGm7h29BZwioa/s1600/digg.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQGF7qBNQwTg1G6ocseZUMLTVIIqcD17FZJBRhDIEifXBe0TSkf9JtUGfbq7_iZu8viEOYF7u8FDv0B84EvLocfxX7H-Bq7nuf5MloTUeMqERPgpU0mVIH1jhWsgd17cAVH6uxRlsRFgaI/s1600/linkedin.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYK688DZ-eoFmJIcsi_WCCzACj0Thk3XRd4IzUbKobpBExMpTPihX8FFyTR4IkahqU4zpTuH5H806fqAIqJIXMW0acUOhM28rF6hElzDjt9xnQYjvqZuLQdnnXk-vk7FDHTndEWFalXrax/s1600/pinterest.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFF_QDsOyLbd3UQMg5gtv4qTWE9MLMwGcLHSigG8uDSi5_ef0NYKxofPp5tTE3xx2MrbSohe2kVRt8Mw4xnk_C3LTmsxk-lOkyoF58V0H0H79Zzz1GTqQwcJSzhgo0RlLU7Szvm1iypp9B/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>
<!-- End Navigation -->
All Done: After customizing, salvage your template yesteryear pressing “Save Template” button. If anyone has whatever inquiry or difficulty then, experience gratis to travel out a comment below nosotros would honey to listen you.
From The Editor's Desk:
Hope that Floating Navigation Bar would amuse your visitors. After adding this gadget, this floating Bar powerfulness overlap your Header department Area. To resolve this only add together margin-top:50px; inwards the CSS of your Header-wrapper as well as it would terminal overlapping your header. What are your thoughts close this gadget? Suggestions would deed every bit a slice of Gold. Take aid till then, Peace, Blessings as well as Happy Floating.
No comments:
Post a Comment