CODEWITHSUNDEEP
htmlcssoverlapsticky
Will
Will

Reputation: 63

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

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;
}

Upvotes: 4

Views: 8196

Answers (2)

Shubham Verma
Shubham Verma

Reputation: 9923

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>

Upvotes: 3

GuyH
GuyH

Reputation: 796

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.

Upvotes: 3

Related Questions