Centering logo in fixed navigation - 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

Centering logo in fixed navigation

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum</title> 
  <style>
body {<!--from   w ww.ja v a  2  s  .com-->
   font-family:Helvetica, Arial, Century;
   font-size:13px;
   margin:0;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') repeat-x top center;
}

#header {
   background-color:Chartreuse;
   height:41px;
   position:relative;
   margin:151px auto 0;
}

#header ul {
   margin:0 auto;
   width:801px;
   padding:0;
   list-style:none;
}

#header ul li {
   float:left;
   width:98px;
}

#header ul li:nth-of-type(4) {
   margin-left:218px;
}

#header ul li a {
   text-transform:uppercase;
   text-decoration:none;
   display:block;
   text-align:center;
   padding:13px 0 0 0;
   height:29px;
}

#header ul li a:hover {
   background:yellow;
}

.logo {
   position:absolute;
   left:51%;
   margin:-49px 0 0 -109px;
}

@media screen and (max-width: 800px)  {
   .logo {
      bottom:100%;
   }
   
   #header ul li:nth-of-type(4) {
      margin-left:0;
   }
   
   #header ul {
      width:601px;
      position:relative;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div id="header"> 
   <a class="logo" href="index.html"> <img src="https://www.java2s.com/style/demo/Safari.png" alt="Michigan State"> </a> 
   <ul> 
    <li> <a href="index.html">Lore</a> </li> 
    <li> <a href="index.html">Lorem</a> </li> 
    <li> <a href="index.html">Lorem ip</a> </li> 
    <li> <a href="index.html">Lorem</a> </li> 
    <li> <a href="index.html">Lorem i</a> </li> 
    <li> <a href="index.html">Lorem </a> </li> 
   </ul> 
  </div> 
  <!--end header--> 
  <!-- <br class="clearboth"> <- - never, ever do this; there are far better ways of containing floats, its not even needed here -->  
 </body>
</html>

Related Tutorials