Menu
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 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...
830
Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
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.
191
When you add position fixed and/or absolute to a element, it means that the element will leave the natural flow and now it belongs to "layer" that is not related to the layer where all the elements are with the natural flow of the document.
This is a great feature as now you can position those elements anywhere without worring about the rest of the page.
So, about your case. You picked the right position, fixed. Now the elements above it doesn't see it and you have to manually add the height of this header element as a margin and/or padding to the top of the next element.
For example, if you had the following:
<div class="header"></div>
<div class="content"></div>
Repeating what you did add a position fixed to header and considering that it's height is 50 px the content element would get a padding-top:50px and it should do the trick.
<style>
.header{position:fixed;top:0;height:50px;}
.content{padding-top:50px;}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
