2

Estou criando um menu fixo e estou com problema.

Quando coloco o position fixed na div do menu a div que estava abaixo (conteudo) "sobe", assim parte do conteúdo fica escondido na div do menu.

Creio que não é correto eu colocar margin-top nessa div conteúdo.

Segue o exemplo:

  <!-- menu fixo !-->
  <div style="position:fixed; width:100%; z-index:999; background-color:#000;top:0; left:0">
    <p> Seja bem vindo </p>
  </div>

  <!-- conteudo !-->
  <div>
      <h1> Conteudo </h1>
  </div> 
6
  • 1
    Você pode usar margin-top ou padding-top. Não há problema algum nisso.
    – Sam
    Commented 23/04/2018 às 16:16
  • 1
    Como o @hugocsl disse na resposta, colocar no body tb é uma solução.
    – Sam
    Commented 23/04/2018 às 16:18
  • No meu caso não da certo pelo motivo da div conteúdo ser dinâmica. Geralmente é uma foto abaixo do menu, e não é sempre a mesma foto. Logo, o tamanho vai variar, e com o margin-top dependendo da img, vai cortar parte. Entende? Commented 23/04/2018 às 16:20
  • Não entendi. O espaço abaixo do menu fixo deveria ter uma altura constante, que vc compensa com margin-top ou padding-top para que a div não fique por baixo do menu. Ou então vc está carregando essas imagens de baixo pra cima rs.
    – Sam
    Commented 23/04/2018 às 16:23
  • Todo conteúdo que se insere na página, a orientação é de cima pra baixo, logo não tem como nada ficar por baixo do menu.
    – Sam
    Commented 23/04/2018 às 16:38

1 Resposta 1

1

Vc pode colocar um padding-top no próprio body, que é o jeito que o Bootstrap por exemplo recomenda. fonte

body { padding-top: 70px; }

OBS: o valor do padding deve ser proporcional a altura do menu. Veja o exemplo para entender melhor

body {
    padding-top: 60px;
}
    <!-- menu fixo !-->
  <div style="position:fixed; width:100%; z-index:999; background-color:#000;top:0; left:0; color: #fff;">
    <p> Seja bem vindo </p>
  </div>

  <!-- conteudo !-->
  <div>
      <h1> Conteudo </h1>
  </div> 

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 .