Fixed navbar doubt on top with Bootstrap

Navigation
1

When I add the "navbar-fixed-top" class it "eats" 50px of the page, I use navbar, links, to divs and whenever a link is clicked the first 50px are underneath the navbar, what I want to do is prevent these px from being under the navbar when the link is clicked. Home NOTE: I already added the padding-top in the body, the problem is not with the first div just after the navbar, but with the others. Home Navbar's HTML: 

<nav id="nav" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img style="margin-top: -10px;" alt="Brand" class="img-responsive" src="">
            </a>
        </div>
        <div class="collapse navbar-collapse" id="menu">
            <ul class="nav navbar-nav navbar-right text-center">
                <li><a href="#quem-somos" class="scroll link-hover"><b>QUEM SOMOS</b></a></li>
                <li><a href="#contato" class="scroll link-hover"><b>CONTATO</b></a></li>
                <li><a href="#" class="link-hover"><b>LOGIN</b></a></li>
            </ul>
        </div>
    </div>
</nav>


#contact HTML: 

<div id="contato" class="bg-color text-white">
  <div class="container padding-divisors">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-bottom-titles">
      <h2 class="text-center">RECEBA MAIS INFORMAÇÕES</h2>
    </div>
    <form method="post" action="#">
      <div id="form-contato" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="form-group">
          <label for="nome">Seu nome (obrigatótio)</label>
          <input required id="nome" name="nome" type="text" class="form-control">
        </div>
      </div>
    </form>
  </div>
</div>

Css: 

body{
    background-color: whitesmoke !important;
    padding-top: 50px !important;
}
#nav{
    box-shadow: black 0 0 5px;
    opacity: 0.3;
}

Eg:

asked by anonymous 13.09.2016 / 20:00

1 answer

1

I would do so: 

body{
    background-color: whitesmoke !important;
    padding: 0px !important;
}
#nav{
    background-color: whitesmoke !important;
    box-shadow: black 0 0 5px;
    opacity: 0.3;
}
    
13.09.2016 / 20:15
Class Library (Portable) UWP + WPF Identify memory leak in c ++? [closed]