I want to change my main menu to open when I hover over the title & keep opened when my mouse is still on the header. Once mouse leaves the header section, the menu will close.
My website: https://kindred-haus.com/
PW: KHaus2023
Basically, I want the menu to function like this website: https://mogutable.com/
Thank you!
Hi @kindred-haus ,
To switch the mega menu in Shopify’s Craft theme from click to mouseover, modify the theme’s JavaScript. Replace the click event with a mouseenter event, and possibly add a mouseleave event to close the menu. Here’s a sample code snippet:
$(document).ready(function() {
$('.mega-menu-trigger').off('click').on('mouseenter', function() {
$(this).find('.mega-menu-content').show();
});
$('.mega-menu-trigger').on('mouseleave', function() {
$(this).find('.mega-menu-content').hide();
});
});
Replace .mega-menu-trigger and .mega-menu-content with the actual selectors used in your theme.
Is your problem solved? If not I can provide a solution. Please let me know.
Best regards
Shishir Hasan | Shopify Website Developer
Hi @KabirDev ,
I don’t have much coding experience, is it possible for you to be a little more specific/provide step by step instructions.
Thank you so much, really appreciate it!
Update, I was able to create the mouse over action to access the drop down menu with another code I found through the community. But it’s difficult to access the sub menu when I move my mouse over since the menu is left aligned. Once I move my mouse to the sub menu, the menu closes.
Sorry another update, I was able to solve this! Now, is it possible to change
hover on sub menu, instead of it being an underline change to bold
move submenu text to align with menu header
Thank you!
Okay, Good to hear.
If you need any kind of help, will do just a knock. I’m able for Shopify design, development, and funnel building.
Best regards
Shishir Hasan | Shopify Website Developer
