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

[SofiR]

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

[Vikas_Chovatiya · 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;
}

[SofiR]

Wow that worked! Thank you so much Vikas!!

[Alfie2312]

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!

[Vikas_Chovatiya]

Hi @Alfie2312 

Please share your site URL

[Alfie2312]

https://consciously-you.myshopify.com

Password: December99

[Vikas_Chovatiya]

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;
}