website header hiding behind content when position is fixed

Asked 2/6, 2012 at 19:23 Answered 10/8, 2020 at 16:25

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&nbsp;&nbsp;</abbr></a></li>
           <li><a href="aboutus.html"> <abbr title="About Us">About Us&nbsp;&nbsp;</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

Pedestrianism answered 2/6, 2012 at 19:23 Comment(2)

which browser u using ie olders does not support fixed position – Prettify 2/6, 2012 at 19:30

@Bipin Actually i am using the Latest stable browsers: Chrome 20 IE 9 and safari 5.6 – Pedestrianism 3/6, 2012 at 8:25

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.

Ciliate answered 2/6, 2012 at 19:27 Comment(2)

i did this but after doing it my header now is above the rest of the content! so users'll see only header not any other content – Pedestrianism 3/6, 2012 at 9:13

You can 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. – Ciliate 3/6, 2012 at 9:20

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>

Airdrie answered 3/10, 2013 at 5:1 Comment(3)

thanks for sharing, seems that you were the only who gave a answer that makes sense...do you have any reference about: ...it belongs to "layer" that is not related to the layer... – Chickasaw 7/2, 2014 at 11:3

It's like if the natural flow of elements is bellow the flow of the elements with positions determined by css. Of course you can control it with z-index. I called layer, the bi dimensional plan stipulated by each z-index value. – Airdrie 20/2, 2014 at 23:9

it's really very helpful – Transvalue 23/1, 2021 at 17:25

You can use z-index

Which element that you want to be in front of other elements, give the z-index value higher.

Like this:

z-index: 300;//navbars

z-index: 0;//contents

Extranuclear answered 10/8, 2020 at 16:25 Comment(1)

I put so later but if someone needs he/she can use it – Bonis 10/8, 2020 at 16:26

When you set the an element to have a fixed positioning, It assumes the other neighbouring elements don't exist. Give the element you want to be fixed a larger z-index. Then to prevent the overlapping, give the element preceded by the fixed element the same padding-top as the height of the fixed element. Hope it helps.

Benignant answered 25/6, 2018 at 17:56 Comment(0)

CSS Z-index might be your solution

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Vertievertiginous answered 2/6, 2012 at 19:26 Comment(0)

 #header {
      margin-top:-38px; //solution
      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;
    }

Elodiaelodie answered 3/10, 2013 at 4:13 Comment(0)

Recommended topics

Hot tags