Prevent the menu from expanding when it is clicked - DAWN

Store Design
1

Hi, I added code that expands the header menu when it is hovered over, but now I would like to prevent the menu from expanding when it is clicked. How can I do this?

Here is my site https://bf4d41.myshopify.com/

Thanks ! :wink:

2

Hi there! I took a look at your site and it looks like you’ve made some modifications to the header menu. To prevent the menu from expanding when it is clicked, you’ll need to modify the JavaScript code that you added to handle the hover event.

One approach would be to modify the event handler to only expand the menu when the mouse is hovering over the menu, and not when it is clicked. You can do this by changing the event that the handler is listening for from mouseenter to mouseover, which fires continuously while the mouse is over the element. Here’s an example of what the modified code could look like:

var expandTimeout;
var $menu = $('.header__nav');
$menu.on('mouseover', function() {
  clearTimeout(expandTimeout);
  $menu.addClass('header__nav--expanded');
});
$menu.on('mouseleave', function() {
  expandTimeout = setTimeout(function() {
    $menu.removeClass('header__nav--expanded');
  }, 250);
});

This code will now only expand the menu when the mouse is hovering over it, and not when it is clicked.

3

Hello, thank you for helping me ! Unfortunately, that didn’t work. I marked it as a solution by mistake. Just to clarify, I already have a hover that works, but I want to disable the click function to open the dropdown menu because the hover is already sufficient.