CODEWITHSUNDEEP
htmlcssmenubar
uto998
uto998

Reputation: 55

Keep Fixed Menu-bar from overlapping

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?

Upvotes: 4

Views: 7045

Answers (3)

caffeinated.tech
caffeinated.tech

Reputation: 6548

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    
}

Upvotes: 4

chazsolo
chazsolo

Reputation: 8439

If I understand what you are asking, put padding-top on the body tag that is equal to the height of the menu bar. That way when you are at the top of the page, the floating menu is not overlapping anything.

Upvotes: 0

TheYaXxE
TheYaXxE

Reputation: 4294

Try to use z-index and set it to ex. 9999:

header {
   background-color:white;
   width:100%;
   padding:15px;
   border-bottom:1px solid black;
   position:fixed;
   margin-top:-25px;
   z-index: 9999;
}

This will put the header in front of all other elements, unless they have a higher z-index number.

Upvotes: -1

Related Questions