how to place the content beneath the fixed header

Question

I have placed two divs beneath the header and made it as fixed then my divs are not visible it is going inside the fixed. Kindly help me in this without using margin-top because if I want to use multiple divs after header it might not be correct.

 var Deb = []; $.noConflict(); jQuery(document).ready(function($) { Deb.push(document.location); });

 /*add*/ .nav>li>a:focus, .nav>li>a:hover { background: transparent!important; } body { margin: 0; padding: 0; font: 400 14px/24px 'Open Sans', sans-serif; } #header { float: left; width: 100%; position: relative; } .head-top { float: left; width: 100%; position: fixed; background: red; z-index: 999; } #nav { padding: 0; margin: 16px 0 0 0; list-style: none; } #nav li { display: inline-block; float: none; position: relative; padding: 0 0 20px 0; } #nav .active { background: transparent; } #nav li a { font: 400 14px/14px 'Lato', sans-serif; color: #000; text-transform: uppercase; text-decoration: none; padding: 0 20px; display: block; position: relative; z-index: 20; } #nav li:hover>a { background: none; } #nav li ul li a:hover, #nav li ul li:hover>a { text-decoration: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <header id="header"> <section class="head-top"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="left-side"> <h1>sandeep</h1> </div> </div> <div class="col-md-6"> <div class="right-side"> <nav class="navbar "> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="nav"> <li class="active"><a href="#" data-tab='main'>Home</a></li> <li><a href="#aboutus" data-tab="aboutus">About</a></li> <li><a href="#gallery" data-tab="gallery">Gallery </a></li> <li><a href="#career" data-tab="career">career</a></li> </ul> </div> </nav> </div> </div> </div> </div> </section> </header>

Answer 1

If you are using position: fixed here, you can also use padding here.

I calculated the total height of the header and add that total height into padding-top

section#mainSection {
  padding-top: 75px;
}

@media (max-width: 992px) {
  section#mainSection {
    padding-top: 141px;
  }
}

Now you need to add your all content inside this #mainSection so, no problem will occur.

 var Deb = []; $.noConflict(); jQuery(document).ready(function($) { Deb.push(document.location); });

 /*add*/ .nav>li>a:focus, .nav>li>a:hover { background: transparent!important; } body { margin: 0; padding: 0; font: 400 14px/24px 'Open Sans', sans-serif; } #header { float: left; width: 100%; position: relative; } .head-top { float: left; width: 100%; position: fixed; background: red; z-index: 999; } #nav { padding: 0; margin: 16px 0 0 0; list-style: none; } #nav li { display: inline-block; float: none; position: relative; padding: 0 0 20px 0; } #nav .active { background: transparent; } #nav li a { font: 400 14px/14px 'Lato', sans-serif; color: #000; text-transform: uppercase; text-decoration: none; padding: 0 20px; display: block; position: relative; z-index: 20; } #nav li:hover>a { background: none; } #nav li ul li a:hover, #nav li ul li:hover>a { text-decoration: none; } section#mainSection { padding-top: 75px; } @media (max-width: 992px) { section#mainSection { padding-top: 141px; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <header id="header"> <section class="head-top"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="left-side"> <h1>sandeep</h1> </div> </div> <div class="col-md-6"> <div class="right-side"> <nav class="navbar "> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="nav"> <li class="active"><a href="#" data-tab='main'>Home</a></li> <li><a href="#aboutus" data-tab="aboutus">About</a></li> <li><a href="#gallery" data-tab="gallery">Gallery </a></li> <li><a href="#career" data-tab="career">career</a></li> </ul> </div> </nav> </div> </div> </div> </div> </section> </header> <section id="mainSection"> <p>Hello</p> </section>