How to open menus on hover instead of click in Debut theme?

Solved
SofiR
New Member
2 0 1

I'm using Debut theme, and I want to be able to open the menus on hover instead of clicking. I followed the attached steps from another discussion below, and still some sub-menus disappear when I try to hover on them. 

I set sitenav dropdown to 30px. I tried other numbers too, but somehow it only gets activated to the right side menu, and the middle sub-menu never gets closer to the main menu above, so due to that gap it keeps disappearing.

Any help would be appreciated!

shoresofmoon.com

 

Screen Shot 2021-03-07 at 21.46.24.png

0 Likes
Vikas_Chovatiya
Navigator
365 86 109

This is an accepted solution.

Hi @SofiR 

Thanks Welcome to the Shopify community!
1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-nav__dropdown{
top: 100% !important;
}



If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
SofiR
New Member
2 0 1

Wow that worked! Thank you so much Vikas!!

Alfie2312
New Member
2 0 0

Hi,

I'm having a similar issue. I'm using the Debut theme and I've added the below to Assets/theme.css, which has made the hover work:

.site-nav--has-dropdown:hover .site-nav__dropdown,
.site-nav--has-dropdown:focus .site-nav__dropdown {
display: block;
}

.site-nav__dropdown { top: 25px; }

 

However, when I navigate to it, it disappears. I saw your response to go to Asset->/theme.scss.liquid, however I can't find this section...

Can anyone help please?

Thanks!

0 Likes
Vikas_Chovatiya
Navigator
365 86 109

Hi @Alfie2312 

Please share your site URL

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
Alfie2312
New Member
2 0 0
0 Likes
Vikas_Chovatiya
Navigator
365 86 109

Hi @Alfie2312 

Thanks For the share URL.
1. Go to Online Store->Themes->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.

.site-nav {
    padding: 0;
}
.site-nav__dropdown {
    top: 100% !important;
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes