Quando adiciono a classe "navbar-fixed-top" ela "come" 50px da página, uso na navbar, links, para divs e sempre que um link é clicado os primeiros 50px ficam embaixo da navbar, oque eu quero fazer é evitar que esses px fiquem embaixo da navbar, quando o link for clicado.
OBS: já adicionei o padding-top no body, o problema não é com a primeira div logo após a navbar, mas sim com as outras.
HTML da navbar:
<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>
HTML da #contato:
<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;
}
Aqui uma parte do padding-top da div#contato está embaixo da navbar, minha dúvida é como evitar isso.
Agradeço a ajuda!