Today a awesome nav bar, If you really want a very best nav bar for your website then this is the best nav bar for blogger blog. From so many days I was finding a nav bar for my other site Then I thought to go to Codepen.io and find a nav bar for my other site and I got one best nav bar from codpen.io . To add this to blogger follow the steps given below
Demo
How to add this to blogger
- Go to Layout>Add a gadget>HTML/javascript
- Paste the following code
<style type="text/css"> body{background:#fff;}.main-nav{list-style:none;width:auto;margin:0px auto;z-index: 9999999999999999999;-webkit-transition:all 0.8s ease-in-out;-moz-transition:all 0.8s ease-in-out;}.main-nav li{float:left;width:150px;padding:15px 5px 15px 5px;position:relative;-moz-transition:background-color .4s ease;-o-transition:background-color .4s ease;-webkit-transition:background-color .4s ease;-ms-transition:background-color .4s ease;background:#434343}.main-nav li:hover{background:rgba(0,0,0,0.4);-moz-transition:background-color .1s ease;-o-transition:background-color .1s ease;-webkit-transition:background-color .1s ease;-ms-transition:background-color .1s ease}.main-nav a{border-top:0;display:block;position:relative;z-index:2;color:#FFF;font:bold 15px kulturista-web-1,kulturista-web-2,Serif;text-decoration:none;text-transform:uppercase;letter-spacing:.5px;overflow:hidden;text-align:center!important;padding:10px!important}.main-nav a:before{content:"";display:block;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrq_e5CwvbbYAWa3cpcRYwGvdXXs0r3_quo61tldGVdUXq7oXUHwGBOwp36U3qF4VVRSmDNCBvqyqnaL7XQfvnDr9duFHUFhVIdWyrE0M41-oJNBb2Ze8QYUxCtWIPQhVoVQqzwiplzP8/s1600/nav-sprite.png) top center no-repeat}.ie8 .main-nav a{padding:10px!important}.main-nav span{text-align:center;font-size:9px;white-space:nowrap;display:block}.main-nav .forums a:before{background-position:center -40px}.main-nav .snippets a:before{background-position:center -80px}.main-nav .almanac a:before{background-position:center -160px}.main-nav .videos a:before{background-position:center -280px}.main-nav .gallery a:before{background-position:center -200px}.main-nav .downloads a:before{background-position:center -240px}.main-nav .deals a:before{background-position:center -120px}.home .main-nav .articles a,.single-post .main-nav .articles a,.Vanilla .main-nav .forums a,.page-template-page-snippet-cat-php .main-nav .snippets a,.page-template-page-snippet-php .main-nav .snippets a,.page-template-video-archive-php .main-nav .videos a,.page-template-video-single-php .main-nav .videos a,.page-template-page-almanac-group-php .main-nav .almanac a,.page-template-page-almanac-single-php .main-nav .almanac a,.post-type-archive-screenshot .main-nav .gallery a,.single-screenshot .main-nav .gallery a,.page-template-page-downloads-php .main-nav .downloads a,.page-template-page-deals-php .main-nav .deals a{color:#000}.main-nav li:before{content:"";position:absolute;top:100%;left:0;right:0;height:8px}.page-template-video-archive-php .main-nav .videos,.page-template-video-single-php .main-nav .videos,.main-nav .videos:hover{background:#01b0ec}.page-template-video-archive-php .main-nav .videos:before,.page-template-video-single-php .main-nav .videos:before{background:#0484b0}.home .main-nav .articles,.single-post .main-nav .articles,.main-nav .articles:hover{background:#ef7901}.home .main-nav .articles:before,.single-post .main-nav .articles:before{background:#cf7000}.Vanilla .main-nav .forums,.main-nav .forums:hover{background:#d54421}.Vanilla .main-nav .forums:before{background:#bb2904}.page-template-page-snippet-cat-php .main-nav .snippets,.page-template-page-snippet-php .main-nav .snippets,.main-nav .snippets:hover{background:#98bf0d}.page-template-page-snippet-cat-php .main-nav .snippets:before,.page-template-page-snippet-php .main-nav .snippets:before{background:#87a812}.page-template-page-almanac-group-php .main-nav .almanac,.page-template-page-almanac-single-php .main-nav .almanac,.main-nav .almanac:hover{background:#7449f1}.page-template-page-almanac-group-php .main-nav .almanac:before,.page-template-page-almanac-single-php .main-nav .almanac:before{background:#5531bf}.post-type-archive-screenshot .main-nav .gallery,.single-screenshot .main-nav .gallery,.main-nav .gallery:hover{background:#b147a3}.post-type-archive-screenshot .main-nav .gallery:before,.single-screenshot .main-nav .gallery:before{background:#922a84}.page-template-page-downloads-php .main-nav .downloads,.main-nav .downloads:hover{background:#f6b402}.page-template-page-downloads-php .main-nav .downloads:before{background:#d49b00}.page-template-page-deals-php .main-nav .deals,.main-nav .deals:hover{background:#8d8d8d}.page-template-page-deals-php .main-nav .deals:before{background:#5e5e5e}.home .main-nav .articles{-webkit-animation:nav-1 1.5s 1s ease 1;-moz-animation:nav-1 1.5s 1s ease 1}.home .main-nav .forums{-webkit-animation:nav-2 1.5s 1.1s ease 1;-moz-animation:nav-2 1.5s 1.1s ease 1}.home .main-nav .snippets{-webkit-animation:nav-3 1.5s 1.2s ease 1;-moz-animation:nav-3 1.5s 1.2s ease 1}.home .main-nav .videos{-webkit-animation:nav-4 1.5s 1.3s ease 1;-moz-animation:nav-4 1.5s 1.3s ease 1}.home .main-nav .almanac{-webkit-animation:nav-5 1.5s 1.4s ease 1;-moz-animation:nav-5 1.5s 1.4s ease 1}.home .main-nav .gallery{-webkit-animation:nav-6 1.5s 1.5s ease 1;-moz-animation:nav-6 1.5s 1.5s ease 1}.home .main-nav .downloads{-webkit-animation:nav-7 1.5s 1.6s ease 1;-moz-animation:nav-7 1.5s 1.5s ease 1}.home .main-nav .deals{-webkit-animation:nav-8 1.5s 1.7s ease 1;-moz-animation:nav-8 1.5s 1.7s ease 1}.main-nav li:nth-child(n+7){border-bottom:0}.main-nav-wrap{margin:-21px 0 0 -21px}.ie8 .main-nav-wrap{margin:0}.main-nav li a,.main-nav li a:hover{color:#fff;text-decoration:none}.ie8 .main-nav a:before,.ie8 .main-nav li:before{display:none}</style>
<nav class='main-nav-wrap'> <ul class='main-nav group'> <li class='articles'><a href='#'>Home<span>Home Page</span></a></li> <li class='forums'><a href='#'>Blogger<span>Blogger Tricks</span></a></li> <li class='snippets'><a href='#'>TEMPLATES<span>BLOGGER TEMPLATES</span></a></li> <li class='videos'><a href='#'>Cool Tricks<span>Tricks</span></a></li> <li class='almanac'><a href='#'>Guest Post<span>Write For Us</span></a></li> <li class='gallery'><a href='#'>Sitemap<span>List Of Posts</span></a></li> <li class='downloads'><a href='#'>Tools<span>Blogger Tools</span></a></li> <li class='deals'><a href='#'>Contact<span>Contact Admin</span></a></li> </ul> </nav>
- Save it
You are all done
EmoticonEmoticon