I have made modifications to the bootstrap navigation using jQuery so that instead of clicking, you can simply hover to enable the dropdown menu. However, I am facing an issue where the first menu option is not clickable. For example, currently the "BLOG" option is not clickable but I want it to be clickable like the other categories.
Has anyone dealt with this issue in Bootstrap before? The website is built on Wordpress. The jQuery code snippet I used to enable the hover functionality for the menu is:
jQuery(document).ready(function() {
var mq = window.matchMedia('(min-width: 768px)');
if (mq.matches) {
jQuery('ul.navbar-nav li').addClass('hovernav');
} else {
jQuery('ul.navbar-nav li').removeClass('hovernav');
};
/*
The addClass/removeClass also needs to be triggered
on page resize <=> 768px
*/
if (matchMedia) {
var mq = window.matchMedia('(min-width: 768px)');
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
jQuery('ul.navbar-nav li').addClass('hovernav');
} else {
jQuery('ul.navbar-nav li').removeClass('hovernav');
}
};
});
The CSS code is as follows:
@media (min-width: 768px) {
.navbar-nav .caret {
display:none;
}
... (CSS rules continue)
}