Display Logo and Nav on same bar - 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

Display Logo and Nav on same bar

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.title {<!--   w w  w .  j ava  2s. com-->
   display:inline;
   float:left;
   margin:0 auto;
}

.nav {
   display:inline;
   float:right;
   margin:0 2.8%;
   margin-bottom:0;
}

ul {
   display:inline;
   float:right;
   list-style:none;
}

li {
   display:inline;
}
</style> 
 </head> 
 <body> 
  <div class="header"> 
   <div class="title"> 
    <h1>Lorem ips</h1> 
   </div> 
   <!--/.title--> 
   <nav class="nav"> 
    <ul> 
     <li>Lore</li> 
     <li>Lorem ip</li> 
     <li>Lorem i</li> 
    </ul> 
   </nav> 
   <!--/.nav--> 
  </div> 
  <!--/.header-->  
 </body>
</html>

Related Tutorials