How make menu item on mouse hover clickable as a link instead of closing the the drop down menu?

Store Design
, , , ,
1

I know my title description is a bit confusing so let me explain. I was able to make my menu dropdown on mouse hover with this code inside header.liquid:

So what I want to do it make a menu item that has sub menu’s in it clickable so that it goes to a collection page. Right now if you click on a menu item with sub menu’s it just closes the drop down menu.

For example…on my website https://www.RTTrove.com if you hover your mouse over the menu item “DND Dice” it will drop down a menu with other submenu’s. If you try and click on “DND Dice” to go to a more broad collection page that includes all of the submenu items…it just closes the drop down menu instead of going to a collection page. Thanks in advance! Hope I explained this okay :face_savoring_food:

2

You need to do an exception for the menu closing.

Find your closing event then put this line of code:

document.getElementById('myLink').addEventListener('click', function(event) {
    var clickedElement = event.target;
    var elementType = clickedElement.tagName.toLowerCase();

    if (elementType === 'a') {
      //Intercept the link clicking event.
      event.preventDefault();
      return;
    }

});
3

Sorry I’m not sure what my closing event is. I’m new to all of this. The code I posted above is what I added. I’m not sure where I would need to add your code.

4

Do you know Javascript? likely somewhere in assets/theme.js file