everyone!
I'm more or less designing a kind of prototype website. Just like other websites, I'm trying to have a menu-bar that is fixed in position, but doesn't overlap everything else I put on the screen. So, in essence, I'd like to have a 100% wide box (menu-bar) on top of another box (body of the webpage), which rests on the footer.
My code looks like this:
<header>
<nav>
<ul>
<a href="#"><li>Name</li></a>
...More list elements...
</ul>
</nav>
</header>
header{
background-color:white;
width:100%;
padding:15px;
border-bottom:1px solid black;
position:fixed;
margin-top:-25px;
nav ul li{
list-style-type:none;
display:inline-block;
padding:10px;
margin-right:100px;
font-family:Script MT, /*To make sure the font is displayable for you*/ Arial;
font-size:20px;
Whenever I have anything in the rest of the document (I've put the menu-bar in the tags and tags), the menubar overlaps it, so it's not visible.
So the question is: How in the world do I get my menu-bar to stay fixed but not overlap everything else?
You need to offset the content by the height of your header, which means you need to give it a fixed height:
HTML:
<header>
...
</header>
<div class="content">
</div>
CSS:
header{
...
height:50px;
}
.content{
margin-top:50px
}