While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doesn't work. Here's my XHTML:
<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>
As well as 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;
}
...
Additionally, includes the JavaScript:
// 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)
To witness the error firsthand, visit this link, view the mobile version, and attempt to toggle the menu from the hamburger icon.