In my website's navigation, I have a subpage and I've implemented two options - Option 1 and Option 2. While both work fine, the issue arises when viewing on mobile devices. The subpages still show when hovering, which is not ideal for mobile users. What I want to achieve is that on mobile devices (e.g., screen size 768), the navbar should be clickable to reveal the subpages instead of requiring hovering.
Option 1:
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
margin: 0;
}
Option 2:
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).show();
jQuery(this).addClass('open');
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).hide();
jQuery(this).removeClass('open');
});
The website is built in bootstrap 3 with Wordpress, and for the navigation, I'm using navwalker.
I hope someone can assist me with resolving the issue in the mobile device navbar. Thank you!
Solution Found:
In desktop view, the Sub Pages would appear on hover, whereas on mobile devices, they will only show upon clicking the Parent Nav.
Credit to user1079877
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});