Positioning of logo and navbar inside header - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Positioning of logo and navbar inside header

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">

   section {<!-- ww  w .ja  va 2 s . c  o m-->
      height: 100%;
   }
   header{
      z-index: 1;
      position:fixed;
      width:100%;
      background:rgba(0,0,0,0.1);
   }
   header ul{
      float:right;
      padding: 0;
      margin: 0;
   }
   header ul li{
      display: inline;
      float:left;
   }
   header a{
      color:white;
      background:rgba(0,0,0,0.1);
      display:inline-block;
      padding:0px 25px;
      height:60px;
      line-height:60px;
      text-align:center;
      text-decoration:none;
      text-transform:uppercase;
      letter-spacing:2px;
      font-weight:700;
   }


      </style> 
 </head> 
 <body> 
  <header> 
   <a href="#" id="logo">Logo</a> 
   <ul id="nav" class="nav"> 
    <li> <a href="#home">Home</a> </li> 
    <li> <a href="#about">About</a> </li> 
    <li> <a href="#services">Services</a> </li> 
    <li> <a href="#portfolio">Portfolio</a> </li> 
    <li> <a href="#contact">Contact</a> </li> 
   </ul> 
  </header> 
  <link href="" rel="stylesheet" type="text/css">  
 </body>
</html>

Related Tutorials