Open Drop Down To Mega Menu On Hover In Dawn Theme

Store Design
1

Hello.

You all are so helpful, and I’m grateful.

My website is www.turquoiseandtufa.com My main menu is a drop down mega menu that currently only opens with a click. I’d like it to open with a hover. I’m using the dawn theme. Is that possible. I tried some accepted solutions for opening the drop down main menu on hover, but they didn’t work to open a mega menu.

Many thanks in advance.

2

Hi @TurquoiseTufa

If you don’t mind please try this way.

https://kaniwong.github.io/2022/08/01/Add-Hover-Effect-to-Mega-Menu-Dawn-Theme-Shopify/

3

@TurquoiseTufa

yes sure you have easy to manage this code,

please add this code before in theme.liquied
4

Hi Kani,

Thank you for your solution. When I enter the first code, I’m able to have the dropdown in the Mega Menu, but I’m unable to navigate my cursor into the mega menu because it closes before I can get it there. I did the second and third steps of entering new code, and it didn’t make any changes - I was still unable to move down into the mega menu because it would close before it got there.

Do you have any suggestions?

Thank you,

Bonnie

5

Hello Ketan,

Thank you for this solution. I entered this code, and it does open the mega menu, but whenever I move the cursor into the mega menu, the mega menu closes. This is the same trouble I was having before with the other accepted solutions. They seem to work to open a drop down menu but not a mega menu.

Do you have any other suggestions?

Thanks,

Bonnie

6

You should show me the site you added my code.Then I will able to check issues.

chrome-capture-2022-8-30.gif

7

@TurquoiseTufa

oh sorry, i have checked now you have removed code if possible to add code and share link again?

8

Hi, after using Kani’s code, open the file:

component-mega-menu.css

Something around line 5 you will find this section:

.mega-menu__content {
background-color: rgb(var(–color-background));
border-left: 0;
border-radius: 0;
border-right: 0;
left: 0;
overflow-y: auto;
padding-bottom: 2.4rem;
padding-top: 2.4rem;
position: absolute;
right: 0;
top: 100%;
z-index: -1;
}

Try first only to edit “top: 100%;” to “top:90%;”.

If the mega-menu is still closing, try e.g. 75% and as well you can try to change the z-index from -1 to e.g. 1…

Stefan

9

Hi Stefan,

your tip does not work, have another idea ?

Much thx

10

Also this works for mega menu, no need for CSS changes: (add to the header.liquid)
11

Thankyou, this code opens the menu but it does not close when you move to a different menu item. any tips?

12

@iamtess

can you please share store url so i will check and let you know

13

This code works on theme taste i added on line 662 and works perfectly , THANK YOU !

14

I just added this to Dawn 8, and it does show on mouse over, but sticks open on the last parent menu item. Is there a fix?

I placed the script after:

</{% if section.settings.sticky_header_type != ‘none’ %}sticky-header{% else %}div{% endif %}>

15

I used @KetanKumar 's code and the css from @StefanBoettjer and it works. Make z-index: 1 and play around with the top. Once it doesn’t close prematurely, you’re done. Afterwards, you can do a padding-top to add some space between the open menu and your navigation bar.

16

Here is a bit upgraded version of @Zurnaib 's code. It will close the previous mega menu if you will hover over another one.
17

Thanks for supplying an update.

18

I applied this code it is working but whenever we have the last dropdown menu and next to that is only the link so hovering over that link doesn’t close that previous dropdown menu. how to resolve that?

19

Hi, answering you from another account,

This code (instead of the previous one) should help:
20

Thanks, I will check it out on a DEV site.