Shopify themes, liquid, logos, and UX
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.
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!
Is your problem solved? If not I can provide a solution. Please let me know.
Best regards
Shishir Hasan | Shopify Website Developer
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
1. hover on sub menu, instead of it being an underline change to bold
2. 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
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024