How to make Bootstrap Carousel stay fixed right below navbar?

Question

Currently my carousel seems to go to the top of the page. I am using a navbar-fixed-top, so obviously the navbar hides the top part of the carousel. How can I make it so that the carousel stays affixed directly below the navbar? Adding a simple padding wouldnt work as when using a smaller screen, the navbar collapses and is a bit of a different height than when its not collapsed.

Code:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="container">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>


    <div class="carousel-inner">
      <div class="item active">
        <img src="/images/p51blueprint.jpg" alt="P-51" width="100%">

      </div>
      <div class="item">
        <img src="/images/f-18-hornet.jpg" alt="F-18" width="100%">

      </div>
      <div class="item">
        <img src="/images/p51blackandwhite.jpg" alt="P-51" width="100%">

      </div>
      <div class="item">
        <img src="/images/B-52-Stratofortress-infographic.jpg" alt="B-52" width="100%">

      </div>
    </div>
  </div>

  <!-- Control arrows -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>


</div>

Answer 1

The navbar has been known to cover the content of the website so change the padding for the body then use the media queries to change the padding of the body too for different size. Something along the lines of:

body { 
    padding-top: 70px; 
}
@media screen and (min-width:768px) and (max-width:990px) {
  body {
    margin-top:100px;
  }
}
@media screen and (min-width:991px) and (max-width:1200px) {
  body {
    margin-top:70px;
  }
}