Bootstrap Navbar on mobile shows up behind everything else

Question

Been using bootstrap to style my header contents but recently facing something weird. The navbar that toggles after tapping on the hamburger menu shows up behind all the components. The z-index is maxed yet it doesn't work. Here's my HTML :

<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">

  <a href="{% url 'index' %}"><img src="{% static 'assets/img/logo-hi-res.png' %}" alt="" class="ActLogo img-fluid"></a>
  <h1 class="logo me-auto"><a href="{% url 'index' %}"><span>My</span>Website.</a></h1>

  <nav id="navbar" class="navbar order-last order-lg-0">
    <ul>
      <li><a href="{% url 'index' %}" class="{% if nbar == 'index' %}active{% endif %}">Home</a></li>

      <li><a href="{% url 'about' %}" class="{% if nbar == 'about' %}active{% endif %}"><span>About</span></a>

      <li class="dropdown"><a href="{% url '#' %}" class="{% if nbar == 'services' %}active{% endif %}"><span>Services</span><i class="bi bi-chevron-down"></i></a>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
        </ul>
      </li>

      <li><a href="#" class="{% if nbar == '#' %}active{% endif %}">Pricing</a></li>
      
      <li><a href="#" class="{% if nbar == '#' %}active{% endif %}">Contact</a></li>
      
      <button class="clientBt btn btn-sm btn-primary mr-2"><a href="#">CLIENT LOGIN</a></button>

    </ul>
    <i class="bi bi-list mobile-nav-toggle"></i>
  </nav>

  <div class="header-social-links d-flex">
    <a href="#" class="twitter" target="_blank"><i class="bu bi-twitter"></i></a>
    <a href="#" class="facebook" target="_blank"><i class="bu bi-facebook"></i></a>
    <a href="#" class="instagram" target="_blank"><i class="bu bi-instagram"></i></a>
    <a href="#" class="linkedin" target="_blank"><i class="bu bi-linkedin"></i></i></a>
  </div>
</div>

And the CSS :

#header {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: grayscale(0) contrast(3) blur(5px);
  transition: all 0.5s;
  z-index: 997;
  padding: 15px 0;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);


}


#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  

}

#header .logo a {
  color: #d40b00;
}

#header .logo a span {
  color: #2C3380;
}

#header .ActLogo {
  width: 60px;
  height:  60px;
  margin-top: -24px;
  margin-bottom: -20px;
  margin-right: 10px;
}

/* Social Links */
.header-social-links {
  margin-left: 20px;
  border-left: 1px solid #c4c4c4;
}

.header-social-links a {
  color: #a0a0a0;
  display: inline-block;
  line-height: 0px;
  transition: 0.3s;
  padding-left: 20px;
}

.header-social-links a i {
  line-height: 0;
}

.header-social-links a:hover {
  color: #e85a5d;
}

@media (max-width: 480px) {
  .header-social-links {
    padding: 0 15px 0 0;
    border-left: 0;
  }

  #header a .ActLogo {
    display: none;
    width: 40px;
    height: 40px;
  }
  #header .logo a {
    color: #E64238;
  }
  
  #header .logo a span {
    color: #2C3380;
  }



@media (max-width: 1200px) {
  #header a .ActLogo {
    display: none;
  }
}

}
@media (max-width: 1200px) {
  .header-social-links {
    padding: 0 15px 0 0;
    border-left: 0;
  }
  #header .logo {
    font-size: 23px;
  }
  #header a .ActLogo{
    margin-top: -10px;
    margin-bottom: -10px;
  }
}

/* Nav Menu */

/* Desktop */
.navbar {
  padding: 0;
  
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  text-transform: uppercase;
  transition: 0.3s;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #565b99;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-top: 2px solid #373F94;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 10px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #111;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #373F94;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

.clientBt{
  color: white;
  background-color: #2C3380;
  border: none;
  padding: 0px;
  margin-left: 30px;
  border-radius: 8px;
}

.clientBt:hover{
  background-color: #4b56ce;
}
.clientBt a{
  color: white;
  padding: 10px;
}
.clientBt a:hover{
  color: white;
}

/*Mobile Navigation*/

.mobile-nav-toggle {
  color: #111;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

/* SWITCH TO MOBILE HEADER */
@media (max-width: 1200px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }

}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  z-index: 999;
  height: auto;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
  z-index: 9999;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #111;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #2C3380;
}

.navbar-mobile .getstarted {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 999;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #2C3380;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

And the Script :

  // Mobile nav toggle
  on('click', '.mobile-nav-toggle', function(e) {
    select('#navbar').classList.toggle('navbar-mobile')
    this.classList.toggle('bi-list')
    this.classList.toggle('bi-x')
  })

  // Mobile nav activate dropdown 
  on('click', '.navbar .dropdown > a', function(e) {
    if (select('#navbar').classList.contains('navbar-mobile')) {
      e.preventDefault()
      this.nextElementSibling.classList.toggle('dropdown-active')
    }
  }, true)

If you want to see the error in action, head over here , see the mobile view and try to toggle the menu from the hamburger.

Answer 1

Had to make a couple adjustments, actually isn't a problem of z-index at all.

1. The nav element has an overflow-hidden attached to it. Remove it.
2. The ul has no height to it, add a min-height: fit-content; .

These 2 changes should make it work as you expect it to.