Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Change menu to open upon hover - Craft theme

Change menu to open upon hover - Craft theme

kindred-haus
Excursionist
19 0 6

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!

Replies 7 (7)

KabirDev
Shopify Partner
248 61 73

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.

- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
kindred-haus
Excursionist
19 0 6

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!

ShishirHelps
Shopify Partner
70 3 4

Hi @kindred-haus 

Is your problem solved? If not I can provide a solution. Please let me know.

 

Best regards

Shishir Hasan | Shopify Website Developer

- I'm Shishir Hasan a Shopify Store Developer | CRO specialist.
- Need a Shopify developer?

Chat on WhatsApp || Work with Upwork


- If this solves the problem, please don't forget to Mark it as Solution!
kindred-haus
Excursionist
19 0 6

Hi @ShishirHelps ,

 

I have not figured it out yet, please provide a solution.

 

Thank you!

kindred-haus
Excursionist
19 0 6

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.

kindred-haus
Excursionist
19 0 6

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!

Screenshot 2023-12-26 at 10.24.17 PM.png

ShishirHelps
Shopify Partner
70 3 4

Hi @kindred-haus 

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

- I'm Shishir Hasan a Shopify Store Developer | CRO specialist.
- Need a Shopify developer?

Chat on WhatsApp || Work with Upwork


- If this solves the problem, please don't forget to Mark it as Solution!