I am designing a website for a school and I want the header of site to be fixed just like facebook has. I tried the fix provided by [this][1] question on stackoverflow but it was hardly of any use in the header. I have an image, basically the logo of the school, where I do position: fixed, but
the header hides behind the page.
HTML:
<body>
<div id="header" > <img src="images/iesheader_nnew1.jpg" /></div>
<div id="menu">
<ul>
<li><a href="index.html"><abbr title="Home">Home </abbr></a></li>
<li><a href="aboutus.html"> <abbr title="About Us">About Us </abbr> </a></li>
<li><a href="acad.html"><abbr title="Academics">Academics</abbr></a></li>
<li><a href="admin.html"><abbr title="Administration">Administration</abbr></a></li>
<li><a href="news.html"><abbr title="News">News</abbr></a></li>
<li><a href="contact.html"><abbr title="Contact Us">Contact Us</abbr> </a></li>
<li><a href="photo.html"><abbr title="Photo Gallery">Photo Gallery</abbr> </a></li>
</ul>
<div class="cleaner"></div>
</div>
CSS:
#header {
margin-left: 0px;
width: auto;
height: 90px;
padding: 0px;
padding-left:185px;
font-size: 35px; color:#FFFFFF;
background-color: #f6c491;
position: fixed;
top: 0;
left: 0;
right: 0;
}
#menu {
position: relative;
clear: both;
width: auto;
height: 38px;
padding: 0;
padding-left:185px;
background-color:#FFFFFF;
margin-bottom: 10px;
margin-left:0px;
}
#menu ul {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu a {
float: left;
display: block;
padding: 8px 20px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000;
outline: none;
border: none;
border-top: 3px solid black;
}
I tried a number of solutions to that, but whatever I do, the header goes behind the page. I want the menu bar also to be fixed but it also is the same…
[1]: Page navigation with fixed header
Add z-index:1000 to the #header css, and add padding-top to the body css which should be a bit more than header’s height. For example, if the header’s height is 40px, put the padding-top: 50px to the body css and it should work.