Second bootstrap navbar overlapping a dropdown-menu from the first navbar?

user_5360672 0
Viewed 1595

I have two fixed-top navbars, the dropdown-menu from the first one gets overlapped by the second navbar. Tried messing around with z-index, positioning and overflow.. Also found a couple somewhat related questions but nothing seems to be helping. Any ideas what could be causing this?

Link to FIDDLE

Image below showing the nature of the problem (2nd navbar overlapping dropdown-menu):

enter image description here

Example:

<!DOCTYPE html>
<html>
<head>
<meta>
<title>Navbar overlapping dropdown-menu</title>

<!-- Bootstrap 4 cdn's & jquery dependency -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>
<body>

    <!-- first navbar with dropdown-menu -->
    <nav class="navbar bg-dark fixed-top navbar-expand-sm">
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#"> 1 </a>
                  <a class="dropdown-item" href="#"> 2 </a>
              <a class="dropdown-item" href="#"> 3 </a>
              <a class="dropdown-item" href="#"> 4 </a>
            </div>
          </li>
        </ul>
      </div>
    </nav>


    <!-- second navbar with top offset -->
    <nav class="navbar bg-primary fixed-top navbar-expand-sm" style="top:56px!important;">
    <p>hello world</p>
    </nav>

</body>
</html>
bootstrap-4 twitter-bootstrap css html
2 Answers

You're correct, this is a z-index issue. Try adding some styles to get the second navbar lower on the z-index. When messing with z-index remember to adjust the siblings that are causing the issue. Adjusting the .dropdown-menu wouldn't do anything because the issue was with parent elements.

You could do this:

.navbar {
  z-index: 90;
}

.navbar+.navbar {
  z-index: 80;
  top:56px;
}
<!DOCTYPE html>
<html>

<head>
  <meta>
  <title>Navbar overlapping dropdown-menu</title>

  <!-- Bootstrap 4 cdn's & jquery dependency -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>

<body>

  <!-- first navbar with dropdown-menu -->
  <nav class="navbar bg-dark fixed-top navbar-expand-sm">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#"> 1 </a>
            <a class="dropdown-item" href="#"> 2 </a>
            <a class="dropdown-item" href="#"> 3 </a>
            <a class="dropdown-item" href="#"> 4 </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>


  <!-- second navbar with top offset -->
  <nav class="navbar bg-primary fixed-top navbar-expand-sm">
    <p>hello world</p>
  </nav>

</body>

</html>

user_74521680

Added two class .front and .back and updated the z-index value.

Updated JSFiddle

CSS:

.front{
 z-index: 2000 !important;
}
.back{
 z-index: -1 !important; 
}

HTML: 

<!-- first navbar with dropdown-menu -->
<nav class="navbar bg-dark fixed-top navbar-expand-sm front">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#"> 1 </a>
              <a class="dropdown-item" href="#"> 2 </a>
          <a class="dropdown-item" href="#"> 3 </a>
          <a class="dropdown-item" href="#"> 4 </a>
        </div>
      </li>
    </ul>
  </div>
</nav>


<!-- second navbar with top offset -->
<nav class="navbar bg-primary fixed-top navbar-expand-sm back" style="top:56px!important;">
<p>hello world</p>
</nav>

Reference for z-index - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

user_8271870
Related