On my navigation there’s a sub page and I’m using this code Option 1 and Option 2 are both working, and it’s my choice of which one of them I’m going to use but the problem is that in mobile device view the sub pages still showing when hovering and it is bad idea for mobile, I want to achieve is that when it comes to mobile devices example size 768 the navbar is clickable and shows the subpages instead of hovering the navbar and shows the subpages.

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');
});

My website is built in bootstrap 3, wordpress and for my navigation I’m using navwalker

Hope you can help me with my in mobile devices navbar problem. Thanks

Read more here: How to change the Hover event to Click event in media query 768 (Navbar)


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: