I'm building a site using Bootstrap 4 that has a notification dropdown, which is intended, naturally, to overlay the content of the main body of the page. The problem is, even with z-index: 10000 on the dropdown, the Packery grid items continue to appear over the menu.
I cannot for the life of me figure out why this is, and various combinations of z-index, position:absolute, position:relative, and every other trick I could think of have failed. Popovers using popover.js do position correctly over Packery, interestingly enough.
Any suggestions for solutions to this?
Since Codepen links need code, here's the dropdown code, though that won't help you much.
<li class="nav-item dropdown dropper">
<a class="nav-link text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell">Notifications</i>
</a>
<ul class="dropdown-menu">
<li class="head text-light bg-dark">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<span>Notifications (3)</span>
<a href="" class="float-right">Mark all as read</a>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box bg-gray">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="drop-footer bg-dark text-center">
<a href="" class="text-light">View All</a>
</li>
</ul>
</li>
Here is the link to a Codepen with one of the pages that is having this issue-- the icons don't work, so the "Notifications" next to the nonexistent picture is the relevant dropdown. https://codepen.io/redheadedmandy/pen/ZxmxgN
Use bootstrap predefined class .position-relative to ul list dropdown menu.Check the codepen working demo below.
<!-- top nav -->
<div class="mainnav">
<nav class="navbar">
<form class="form-inline right-align">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<ul class="navbar-nav main-ul">
<li class="nav-item dropdown dropper">
<a class="nav-link text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell">Notifications</i>
</a>
<ul class="dropdown-menu position-relative">
<li class="head text-light bg-dark">
<div class="row">
<div class="col-lg-12 col-sm-12 col-12">
<span>Notifications (3)</span>
<a href="" class="float-right">Mark all as read</a>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box bg-gray">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="notification-box">
<div class="row">
<div class="col-lg-3 col-sm-3 col-3 text-center">
<img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
</div>
<div class="col-lg-8 col-sm-8 col-8">
<strong class="text-info">David John</strong>
<div>
Lorem ipsum dolor sit amet, consectetur
</div>
<small class="text-warning">27.11.2015, 15:00</small>
</div>
</div>
</li>
<li class="drop-footer bg-dark text-center">
<a href="" class="text-light">View All</a>
</li>
</ul>
</li>
<li class="nav-item pic-dropper">
<a href="#" class="nav-link" id="dropdownMenuButton" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="images/prof-pic.jpg" class="profpic float-right" alt="Profile picture"></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<h6 class="dropdown-header">Dropdown header</h6>
<div class="dropdown-divider"></div>
<ul class="notification-list">
<li class="notification-item">
</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>