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

Store Design
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!

Screen Shot 2021-03-07 at 21.46.24.png
Screen Shot 2021-03-07 at 21.46.24.png829×887 66.1 KB

2

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

Wow that worked! Thank you so much Vikas!!

4

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!

5

Hi @Alfie2312

Please share your site URL

6

https://consciously-you.myshopify.com

Password: December99

7

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