I'm in the process of creating a top navigation bar with dropdown functionality that appears when hovering over certain navigation items. Here's how it currently looks:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});
.navbar{
background-color: black;
padding-left: 5vw;
padding-right: 4vw;
}
.navbar .nav-item{
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
.navbar .nav-item .nav-link{
color: white;
font-size: 18px;
font-family: 'Roboto';
font-weight: bold;
}
.navbar .nav-item .nav-link:hover{
color: red;
text-decoration: none;
}
.navbar .nav-item a:hover{
color: #4c4c4c;
}
.navbar .nav-item:not(:last-child) {
margin-right: 5px;
}
.dropdown-toggle::after {
transition: transform 0.15s linear;
content: none;
}
.show.dropdown .dropdown-toggle::after {
transform: translateY(3px);
}
.dropdown-menu {
margin-top: 5px;
border-top: 5px solid red;
border-radius: 0;
padding: 0;
}
.navbar .nav-item a{
font-size: 18px;
color: #080808;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 40px;
font-weight: 400;
font-family: 'Roboto';
background-color: none;
border-bottom: 1px solid rgba(193,193,193,0.59);
}
.navbar .nav-item .nav-link{
border-bottom: none;
}<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="#information" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Who we are</a>
<a class="dropdown-item" href="#">What we do</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>My objective is to have both dropdowns appear on hover and have the navigation functionality working, where clicking on a dropdown item will navigate the user to a specified section. In the current code, "About Us" should show its dropdown on hover and navigate to the specified section ("#information") when clicked.
Unfortunately, I'm only able to get one of these functionalities working at a time. If the dropdown works on hover, the navigation doesn't, and vice versa.
Any assistance would be greatly appreciated.
Thank you.