CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design
Vinith Almeida
Vinith Almeida

Reputation: 1471

Fixed header overlaps the content below

I have the following HTML,

header {
  background: #f6f6f6;
  width: 100%;
  min-height: 120px;
  position: fixed;
  z-index: 100;
  top: 0;
  padding: 5px 0;
}
<header>
  <div class="container">
    <div class="row">
      <a href="index.html">
        <img src="images/logo.png" class="img-responsive" alt="">
      </a>
    </div>
  </div>
</header>

As you can see it is a fixed header and I've given it a min-height of 120px. This makes the header overlap the content below and I've prevented that by giving the div that wraps the content a margin-top of 90px.

This works fine on larger layouts but when the layout gets smaller and the image starts re-sizing(due to the .img-responsive class) its height reduces and it results in an empty space below it. I could write a media query and reduce the margin-top but I was wondering if there is some other way to prevent this from happening.

Upvotes: 0

Views: 1519

Answers (1)

Sam Willis
Sam Willis

Reputation: 4211

You can use JS to update the margin based on the header size on page load.

$(function() {
    var headHeight = $('header').outerHeight();

    $('.welcome-home').css({'margin-top': headHeight });
});

This will get the total height of the header element and then apply that size as margin-top to .welcome-home.

Here's a fiddle: https://jsfiddle.net/13n7mpbk/ If you try adding to the header, it will automatically increase the margin as needed when the page is loaded.

Upvotes: 1

Related Questions