Problems with overlapping sticky header (overlaps main content below it)

Question

I've followed various tutorials over the last few days and am having difficulties with the (sticky) header overlapping the content below it when my page is scrolled vertically.

It's on all pages of this test site.

HTML >

<header>
  <div id="nav">
    <ul>
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="collection.html" title="Collection">Collection</a></li>
      <li><a href="shop.html" title="Shop">Shop</a></li>
      <li><a href="faq-policies.html" title="Frequently asked questions and policies">FAQ/Policies</a></li>
      <li><a href="contact.php" title="Contact">Contact</a></li>
    </ul>
    </li>
    </ul>
    <br class="clearboth"/>
  </div>
</header>
<br>
<div class="table">

CSS >

header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: fixed;
    z-index: 10;
}

.table {
    margin-left: 75px;
    text-decoration: none;
    margin-top:300px;
}

Just add `padding-top` to the `.table` div sufficient to push it down far enough to be seen. — Paulie_D, Oct 03 '14 at 18:33
it might be polite to add a brief warning that you're linking to a page containing photographs of persons in underwear. while not offensive, it is something that i would have rather not opened at work. — Woodrow Barlow, Oct 03 '14 at 18:34
more over don't link to the live site at all which will no longer be relevant when the issue is resolved. instead make an example of the issue in a fiddle — andrew, Oct 03 '14 at 18:40
you shouldn't use `fixed` for your header if you don't want it to overlap your content. Just make your table-div with the content scroll instead of your whole page, that way your header will always be above your content (terrible idea to name a `div` `.table` btw, name it `.content` or something) — myfunkyside, Oct 03 '14 at 18:48
Thanks everyone - sorry for n00b errors, still getting the hang of this site! — Will, Oct 04 '14 at 02:52

score 3 · Accepted Answer · answered Oct 03 '14 at 22:47

Actually you were almost there with your code as it was. You simply need to give the header a background colour, as that is transparent by default, and also give a width of 100%. Then the scrolling content will disappear up behind it.

Also best to tidy it up by setting the body margin and padding to zero. So add this to your CSS:

body{
    margin: 0;
    padding: 0;
}

header {
    background: white;
    width: 100%;
}

That will achieve what you want initially. Now, however, comes the interesting bit that most people omit. I'm not quite sure why you have given the table div a margin of 300px, as that is much larger than you need. But do not set this in pixels at all! Because using fixed measurement means that as soon as a partially sighted user running with text-only zoom (a lot depends on their browser) sees the page, the header will overlap the content, hiding it, so undoing all your hard work! Use em units.

The menu in your example has 5 lines, plus there is a blank line above and two or three more below, so allow 9em in all for the header (you choose the value according to how high your final header actually is), and do this:

.table {
    margin-top: 9em;   /* instead of 300px */
}

Now, whatever text zoom the user is using, your content's top margin will grow accordingly, and the content will always start just below the header.

Thanks Guy, gone with your solution as I need to get the site finished asap! Much appreciated to everyone who took the time to comment - enjoy your weekends! — Will, Oct 04 '14 at 02:53

score 3 · Answer 2 · answered Apr 25 '18 at 10:14

Add below css into your top header class:

z-index: 99;

As:

<header style="z-index:99">
  <div id="nav">
    <ul>
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="collection.html" title="Collection">Collection</a></li>
      <li><a href="shop.html" title="Shop">Shop</a></li>
      <li><a href="faq-policies.html" title="Frequently asked questions and policies">FAQ/Policies</a></li>
      <li><a href="contact.php" title="Contact">Contact</a></li>
    </ul>
    </li>
    </ul>
    <br class="clearboth"/>
  </div>
</header>

Problems with overlapping sticky header (overlaps main content below it)

2 Answers2