CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Jonathan Laliberte
Jonathan Laliberte

Reputation: 2725

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

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>

Upvotes: 3

Views: 2505

Answers (2)

JRoss
JRoss

Reputation: 1395

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>

Upvotes: 4

Dhana
Dhana

Reputation: 1658

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

Upvotes: 1

Related Questions