Dawn Theme: Header Menu Closes When Mouse Pointer Moves Over Menu

Solved

Dawn Theme: Header Menu Closes When Mouse Pointer Moves Over Menu

maheswaranapk
Visitor
3 0 0

Expected Behavior:
- When we click on the Header Menu text, the menu opens.
- We can then hover over the menu.
- Once the mouse moves out of the opened menu, the menu collapses.

Current Behavior:
- When we click on the Header Menu text, the menu opens.
- The menu collapses as soon as the mouse moves into it.

Please look at attached video [https://vimeo.com/97558


Accepted Solution (1)

parth_ghelani
Shopify Partner
259 38 39

This is an accepted solution.

Hey there,

To keep submenu open even when you remove mouse pointer from menu list, you just need to follow below steps:

1 Go to Shopify Admin > Online Store > edit code.

2. In code directory, find the file named "base.css", and open the file.

3. Copy the below mentioned code and paste it at the end of the "base.css" file.

 

 

.header .header__heading {
 z-index: 99;
}
.header header-menu .mega-menu__content {
 top: 60% !important;
}

 

 

4. Don't forget to save the file after changes.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Best Regards

Parth ghelani

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns

View solution in original post

Replies 2 (2)

parth_ghelani
Shopify Partner
259 38 39

This is an accepted solution.

Hey there,

To keep submenu open even when you remove mouse pointer from menu list, you just need to follow below steps:

1 Go to Shopify Admin > Online Store > edit code.

2. In code directory, find the file named "base.css", and open the file.

3. Copy the below mentioned code and paste it at the end of the "base.css" file.

 

 

.header .header__heading {
 z-index: 99;
}
.header header-menu .mega-menu__content {
 top: 60% !important;
}

 

 

4. Don't forget to save the file after changes.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Best Regards

Parth ghelani

Was your question answered? Mark it as an Accepted Solution.
If you need further assistance to optimize your store, please don't hesitate to reach out. I'm committed to providing you with my full support and ensuring that you get the most out of our collaboration.

Get in Touch: You can contact me directly at softkarts@gmail.com for any questions or concerns
maheswaranapk
Visitor
3 0 0

Thank you so much