Dropdown menu on Hover | Debut Theme

Solved
VelasArtes
Explorer
56 1 11

My website

I want to have the dropdown meny display on hover. It currently only works when I click on it.

 

Is there an easy fix for this? Any tutorial I find online is outdated and does not work properly. They usually recommend to add this at the end of the theme.css file, but nothing happens:

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

 

I would appreciate any help,

 

Thanks

0 Likes
prinpadure
Pathfinder
105 29 37

Hi @VelasArtes

I have tried the solution you shared for your website and it works

Have you checked if you edited your theme.css file in your live/published theme?

E-mail: rares.holota@gmail.com
Skype: live:2a4135b17a38cd3c
Available for hire
Feel free to contact me
0 Likes
VelasArtes
Explorer
56 1 11

@prinpadure Hello,

This is a preview of my website, which contains the code snippet I mentioned above. I don't see that the dropdown menu displays on hover. I have to click it.

 

Could you confirm this?

 

Thanks

0 Likes
neeravmakwana
Shopify Partner
163 29 35

You're right, hover effect does not work on your website.

0 Likes
Chin1
Excursionist
13 0 1

Hi, You should reach out to shopify chat, and have a customisation done. As far as i would imagine it would be a simple code insert. adding hover somewhere

0 Likes
VelasArtes
Explorer
56 1 11

Hi,

Shopify support is a bit disappointing in these matters. I have already contacted them to make the hover effect, and add images to the dropdow menu.

 

They said they couldn't add hover effect to dropdown menu because it would go against accessibility laws, and they also said they wouldn't be able to add images to my dropdown menu because it would take longer than 1hr free expert time (It took me 40mins to do it myself, and I am no expert).

0 Likes
prinpadure
Pathfinder
105 29 37

This is an accepted solution.

@VelasArtesyou have this code inside your theme.css:

<!--DropDown on hover-->
.site-nav--has-dropdown:hover .site-nav__dropdown,
.site-nav--has-dropdown:focus .site-nav__dropdown {
 display: block;
}
.site-nav__dropdown { top: 30px; }

 

The <!--DropDown on hover--> line is an HTML comment and it shouldn't be present in your css file. Remove this line and the solution will work

 

E-mail: rares.holota@gmail.com
Skype: live:2a4135b17a38cd3c
Available for hire
Feel free to contact me
VelasArtes
Explorer
56 1 11

Thank you so much. Embarrasing mistake. I appreciate your help.

 

Also, would you be able to point me into how to make the "Catalogo" menu item clickable, to send me into the link I want. The outdated tutorials suggest to remove the following code (which no longer exists in the debut theme):

cache.$parents.on('click.siteNav', function(evt) {
 var $el = $(this);

if (!$el.hasClass(config.activeClass)) {
 // force stop the click from happening
 evt.preventDefault();
 evt.stopImmediatePropagation();
 }

showDropdown($el);
 });

 

Thanks Again,

 

0 Likes
VelasArtes
Explorer
56 1 11

For anyone wondering how to solve the second problem. Follow this link

0 Likes
Chin1
Excursionist
13 0 1

Hey, nice customisation, where should it be put pls

0 Likes