Div below another - fixed menu

Asked

Viewed 1,294 times

2

I’m creating a fixed menu and I’m in trouble.

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

I believe it is not correct to 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>
html css
  • 1

    You can use margin-top or padding-top. No problem at all.

  • 1

    As @hugocsl said in the reply, putting in body tb is a solution.

  • In my case it’s not right because the div content is dynamic. It’s usually a photo below the menu, and it’s not always the same photo. Soon, the size will vary, and with the margin-top depending on the img, will cut part. Understand?

  • I don’t understand. The space below the fixed menu should have a constant height, which you compensate with margin-top or padding-top so that the div is not below the menu. Or else you’re carrying these images up.

  • All content that is inserted in the page, the orientation is top down, so there is nothing to be under the menu.

  • Yes, I know that! Putting the padding-top solved my problem.

Show 1 more comment

1 answer

1


You can put a padding-top on its own body, which is the way that Bootstrap for example recommends. source

body { padding-top: 70px; }

OBS: the padding value must be proportional to the menu height. See the example to better understand

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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.