Awesome Colorful pure css navigation bar widget for blogger

We have created a fresh new colourful navigation menu bar made with pure css with awesome design and unique look. previously I shared with you radial menu, flat dropdown menu and navigation menu in ribbon style but this time I have some thing different for you which really make an awesomeness in your blog.

We have created this beautiful navigation menu with pure CSS and no javascript or jquery use because I know that jquery effects the site load time so that's why I take very special care while designing that I use jquery minimum and always try first with CSS to create any effect and if failed then I use jquery or javascript.

Well guys, Before we implement any element on template everyone want to see a live demo of it to check that how it looks like on live page. For live demo check out the below link.

Note: the width of the widget is auto which means can be fit on any place.

Live Demo

Add it on Blogger

1. Go to Blogger dashboard >> Template
2. Backup your template
3. Click on Edit HTML
4. Search for  and just above it paste the below piece of code:

/*-----------------------------------------------
Blogtoolsbr MultiColor Menu Bar CSS
----------------------------------------------- */
#colornav {width: auto;display: block;height: 65px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjhMvf6TM5g4XxzgSAK6Mo5gaDL3WiXo1UNvfciGZsd8xPVaQe9P7CU0U1w7hqtlPn_xR6DQwsGTmKPaiAqLUX1gBpCaxmbXiCx76tVgWukARCi3LU_k4d1P2BtdsMDvH-kYnK1t5bGA/s65/MenuBar.png);-webkit-box-shadow: 0px 6px 10px #282c2e;-moz-box-shadow: 0px 6px 10px #282c2e;box-shadow: 0px 6px 10px #282c2e;}
#colornav li {list-style: none;height: 44px;float:left;padding:10px 5px;margin-left: -10px;}
#colornav li a {color: #fff;width: 100px;height: 40px;line-height: 53px;border-top: 4px solid #636393;padding:0px;font-size:18px;font-weight:lighter;text-align:center;text-decoration: none;display: block;-webkit-transition: .3s all linear;-moz-transition: .3s all linear;-o-transition: .3s all linear;transition: .3s all linear;}
#colornav li:nth-child(1) a {border-color: #636393;}
#colornav li:nth-child(2) a {border-color: #B5222D;}
#colornav li:nth-child(3) a {border-color: #D4953C;}
#colornav li:nth-child(4) a {border-color: #609491;}
#colornav li:nth-child(5) a {border-color: #87A248;}
#colornav li:nth-child(6) a {border-color: #4099FF;}
#colornav li:nth-child(1) a:hover {border-bottom: 35px solid #636393;height: 9px;}
#colornav li:nth-child(2) a:hover {border-bottom: 35px solid #B5222D;height: 9px;}
#colornav li:nth-child(3) a:hover {border-bottom: 35px solid #D4953C;height: 9px;}
#colornav li:nth-child(4) a:hover {border-bottom: 35px solid #609491;height: 9px;}
#colornav li:nth-child(5) a:hover {border-bottom: 35px solid #87A248;height: 9px;}
#colornav li:nth-child(6) a:hover {border-bottom: 35px solid #4099FF;height: 9px;}

• Now paste the below code in the header section of your template where you want the menu to be appeared.

<ul id="colornav">
<li><a href="http://blogtoolsbr.blogspot.com/">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contact us</a></li>
</ul>

Voila ! you have successfully installed the colourfull navigation menu in your template.