Overlay Div with Navbar

Asked

Viewed 1,112 times

1

Good morning.

I’m using Bootstrap to develop a website and I’m using a Navbar and a Div with an image, but when I insert the navbar and div with the image, the div starts just below Navbar and that’s not what I expected.

Basically what I want and overlay this image with the navbar, ie make the div start at the top corner of the screen and the navbar too, superimposing the div.

Can someone help me?

I tried to use z-index, but I could not set a value that overlaps my div.

Thanks for your help.

Edit: That part of the code is basically this:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <a class="navbar-brand" href="index.html">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarMain">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="solu.html">Soluções</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="prod.html">Produtos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="abt.html">Sobre</a>
      </li>
    </ul>
  </div>
</nav>
<div style="min-height: 100vh;width: 100%;background-color: blue">
    <p>Div</p>
</div>

A full screen div and a navbar that has to overlay it, realize that the text "div" ta under the navbar, wanted it "disappear behind the navbar"

javascript html css bootstrap

  • Post an example of your code.

  • 1

    Without code and a visual sample of the problem it is difficult to find a solution.

  • I edited and placed a sample of the code.

1 answer

1


To use the z-index your <div> must have a position set, in case Navbar has the z-index:0 for default, then to play the div azul down I put in her position: relative; and z-index: -1; and used the top: -56px; for her to line up at the top of the page.

div.azul {
    min-height: 100vh;
    width: 100%;
    background-color: blue;
    top: -56px;
    position: relative;
    z-index: -1;
}

See working here: (I put the big text for you to see that it’s going behind the Navbar ok, then you withdraw)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name=
 content=
>
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
  div.azul {
        min-height: 100vh;
        width: 100%;
        background-color: blue;
        top: -56px;
        position: relative;
        z-index: -1;
        font-size: 70px;
        color: red;
    }
</style>
</head>
<body>
  
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <a class="navbar-brand" href="index.html">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" id="navbarMain">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="solu.html">Soluções</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="prod.html">Produtos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="abt.html">Sobre</a>
        </li>w
      </ul>
    </div>
  </nav>
  <div class="azul">
      <p>Div</p>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

  • Thanks was just that, just another thing I kind of didn’t understand was where did the "top: -56px;" come from (the 56px is an exact measure, navbar size or what?), but it solved my problem.

  • @Targaryen how good it worked! "The top: -56px;" is to make the Blue Div climb from behind Navbar to the top of the window. If you take the color of the BG of Navbar, you will see the Blue Div touching the top of the window. At least that’s what I understood that you wanted rss. If my answer was what you needed consider marking the Answer with "Accept" ✔

Browser other questions tagged javascript html css bootstrap

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