Div below another - fixed menu

Navigation
2

I'm creating a fixed menu and I'm having a problem.

When I put the position fixed in the div of the menu the div that was below (content) "up", so part of the content is hidden in the menu div.

I think it's not correct I put margin-top in this content div.

Follow the example: 

  <!-- 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>
    
asked by anonymous 23.04.2018 / 18:07

1 answer

1

You can put a padding-top in the body itself, which is the way that Bootstrap for example recommends . font 

body { padding-top: 70px; }

NOTE: The padding value should be proportional to the height of the menu. See the example to understand better 

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>
    
23.04.2018 / 18:16
Evaluate increasing order with repeat structure Synchronize animation of elements when inserting in DOM