I'm currently building a top navigation bar that shows dropdown on hover on some of the nav-items. It currently looks like this
$(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>
So what I want to do is having both dropdown on hover working as well as using the dropdown same button(nav-item) to work as a button that navigates the user to specified section.
In the above code, it would be "About Us" that will show its following dropdown on hover. And when "About Us" is clicked, it would navigate the user to specified section ("#information").
I can only get one or the other working. If i get dropdown on hover, navigation doesn't work, if i get navigation work, then dropdown doesn't appear on hover.
Any help would be much appreciated
Thank you.