1

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;
}

Ex:
inserir a descrição da imagem aqui

Aqui uma parte do padding-top da div#contato está embaixo da navbar, minha dúvida é como evitar isso.
Agradeço a ajuda!

4
  • 1
    Coloque seu CSS, pelo menos a parte do topo.
    – Diego
    Commented 13/09/2016 às 18:03
  • tenta tirar o padding, usa um reset antes de adicionar o bootstrap :3 Commented 13/09/2016 às 18:05
  • Caso ele não funcione, apenas colocando seu próprio CSS como o @Diego comentou Commented 13/09/2016 às 18:05
  • 1
    Coloca o html desse trecho
    – MagicHat
    Commented 13/09/2016 às 18:12

1 Resposta 1

1

Eu faria assim :

body{
    background-color: whitesmoke !important;
    padding: 0px !important;
}
#nav{
    background-color: whitesmoke !important;
    box-shadow: black 0 0 5px;
    opacity: 0.3;
}
3
  • O Bootstrap recomenda que quando a classe "navbar-fixed-top" for utilizada que use padding de no mínimo 50px. Sua solução não resolve, é meio complicado de explicar essa minha dúvida, mas quero que quando a algum link seja clicado (os link apontam para divs na mesma página) a navbar não fique por cima do conteúdo da div, como acontece na imagem de exemplo, talvez com javascript dê pra resolver esse problema, mas não tenho ideia de como fazer. @MagicHat Commented 13/09/2016 às 18:20
  • coloca o html do trecho
    – MagicHat
    Commented 13/09/2016 às 19:13
  • html adicionado @MagicHat Commented 14/09/2016 às 15:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .