Bootstrap navbar-fixed-top overlapping carousel slider

Question

So, want put a navbar-fixed-top in my nav. The proposal is that my nav follow when scrolling page. But the difficulty is that my nav is overlapping the section right below in this case, my carousel slide.

here de jsfiddle https://jsfiddle.net/fhvo7anz/

<header class="container-fluid">
    <div class="container bghead navbar-fixed-top ">
        <div class="row">
          <div class="col-md-4">
          <a href="#"><img class="img-responsive" src="images/logo.png"></a><br>
          </div>
              <div class="col-md-8">
                  <nav class="navbar navbar-default bgnav">
                      <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                          <ul class="nav navbar-nav">
                            <li><a href="#">Home<span class="sr-only"></span></a></li>
                            <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Institucional <span class="caret"></span></a>
                              <ul class="dropdown-menu">
                                <li><a href="#">Institucional</a></li>
                                <li><a href="#">Missão, Visão e Valores</a></li>
                                <li><a href="#">Organograma</a></li>
                                <!--<li role="separator" class="divider"></li>-->
                              </ul>
                            </li>
                              <li><a href="#">Atividades</a></li>
                              <li><a href="#">Link</a></li>
                              <li><a href="#">Contato</a></li>
                          </ul>
                            <form class="navbar-form navbar-right" role="search">
                            <div class="form-group">
                              <input type="text" class="form-control" placeholder="Procurar">
                            </div>
                            <button type="submit" class="btn btn-default">Ir</button>
                          </form>
                        </div><!-- /.navbar-collapse -->
                      </div><!-- /.container-fluid -->
                    </nav>
              </div>
        </div> 
    </div>
    </header>

Answer 1

Add this to your CSS:

#carousel-example-generic {
    margin-top:150px;
}