Navigation Bar with centered Logo - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav bar image

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav bar image

Description

Navigation Bar with centered Logo

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>
header {<!--from w ww . j  a  v  a 2s.  c  om-->
   width:91%;
   margin:0 auto;
}

#logo {
   text-align:center;
}

.nav {
   text-align:center;
}

.nav li {
   display:inline;
   margin-right:2em;
}

@media  (min-width: 768px)  {
   body {
      background-color:Chartreuse;
   }
   
   .nav {
      margin-top:-43px;
   }
   
   .nav li:nth-child(1), .nav li:nth-child(2) {
      float:left;
   }
   
   .nav li:nth-child(3), .nav li:nth-child(4) {
      float:right;
   }

}
</style> 
 </head> 
 <body> 
  <header> 
   <h2 id="logo">Lore</h2> 
   <ul class="nav"> 
    <li> <a href="#">Lore</a> </li> 
    <li> <a href="#">Lorem</a> </li> 
    <li> <a href="#">Lorem i</a> </li> 
    <li> <a href="#">Lorem </a> </li> 
   </ul> 
  </header>  
 </body>
</html>

Related Tutorials