Subscribe For Free Updates!

We'll not spam mate! We promise.

Saturday, 21 June 2014

Simple Stylish Navigation Bar / Menu Bar

How To Simple Stylish CSS Navigation Bar / Menu Bar In Blogger.












Copy CSS Codes And Paste Between <b:skin>---</b:skin>

.navbar
 { 
 background-color: #08416C; 
 height: 45px; 
 color: #fff; 

 .navbar.small 
 { 
 height: 4px; 
} .menu-bar 
{ height: 44px; 
 line-height: 44px; 
 float: left; 
 left:50px; 
 position: relative; 
 padding: 0 30px; 
 color: white; 
 font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 

 .menu-bar.active, .menu-bar:hover 
{ height: 43px; 
 background-color: #063456; 
 border-bottom: 3px solid #0091DD; 
 font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 

 .menu-bar a 

 color: #fff; 
 text-decoration: none; 
 }
 li { list-style-type: none; 

 .navb > li:hover ul

 display: block; 
}


Html Codes

<div class="navbar">

<li class="menu-bar active">

<a href="#" >Home</a></li>
                         
<li class="menu-bar">
<a href="#"> Computer</a> </li>

<li class="menu-bar">
<a href="#"> Earn Online</a> </li>

<li class="menu-bar">
<a href="#">Blogger Tips</a> </li>

                                </div>





Socializer Widget By Tips And How
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 comments:

Post a Comment