Reputation: 2725
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):
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
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
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