Navbar- disable "onClick" drop-down

Question

I'm working on a project on my desktop for a theme development, but an issue I am having is that when the user clicks on the navigation menu, it causes it to collapse. Since I got collapse to work on hover, I don't need it when clicked.

I'm using the theme Unite. I don't have a way of sharing this project, and only have done surface customizations until the navigation bar. It's all the original PHP and JS. The CSS is original outside of color changes.

If someone is able to assist me, I'd be most appreciative!

Answer 1

I think this will work for you demo

here is another js solution demo2

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

Answer 2

In the Menus page, click on the Custom Links section on the left. The Custom Links option lets you link to any URL you want, but we’ve got a special trick instead. In the URL input, replace “http://” with a pound sign “#,” and enter whatever text you want for the Link Text. Click the Add to Menu button, and then you can arrange the new item in your menu. Since the menu item isn’t linked anywhere, visitors won’t be taken to a new page if they click it.

Answer 3

This approach uses global variable to return false for link click in desktop but true on mobile and tablet. Also works for resized windows.

$(document).ready(function () {
    win_width = $(window).width();
    $('.yamm-fw > a').click(function(e){
        return win_width < 1200;
    });
});

$(window).on('resize', function () {
    win_width = $(window).width();
});