Menu position fixed on header hides content - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

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

Description

Menu position fixed on header hides content

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

*, body {<!--  ww  w.jav a2s . c o m-->
   padding: 0;
   margin: 0;
}
.heightTest{height:90px;}
body {
   background-color: black;
}
.responsiveContainer {
   width: 100%;
}
.header {
   background-color: #000000;
   padding: 10px;
   padding-left: 0;
   padding-right: 0;
   box-shadow: 0 5px 0 #232323;
   text-align: center;
   width: 100%;
   position: fixed;
}
.navbar {
   background-color: #131313;
   padding: 10px;
}
.navElem {
   display: inline;
   margin: -2px;
}
.navLink {
   text-decoration: none;
   padding: 10px;
   padding-top: 11px;
   color: #FFFFFF;
   font-family: SinkinSans;
   transition: all 0.5s;
   -moz-transition: all 0.5s;
   -webkit-transition: all 0.5s;
   -o-transition: all 0.5s;
}
.navLink:hover {
   background-color: #0044FF;
   box-shadow: 0 5px 0 #01268A;
}
.navLink:visited {
   color: #FFFFFF;
}
.active {
   background-color: #0044FF;
   box-shadow: 0 5px 0 #01268A;
}
.startBox {
   background-color: #0044FF;
   margin-top: 10px;
}
.alignLeft {
   text-align: left;
}
      </style> 
 </head> 
 <body> 
  <div class="responsiveContainer"> 
   <div class="heightTest"> 
    <div class="header"> 
     <div class="navbar"> 
      <ul> 
       <li class="navElem"> <a href="#" class="navLink active">Home Page</a> </li> 
       <li class="navElem"> <a href="#" class="navLink">Our Products</a> </li> 
       <li class="navElem"> <a href="#" class="navLink">Contact Us</a> </li> 
       <li class="navElem"> <a href="#" class="navLink">About Us</a> </li> 
      </ul> 
     </div> 
    </div> 
   </div> 
   <div class="startBox"> 
    <p>this is a test</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials