Dropmenu on hover - Debut Theme

Solved
Julia_Web
Tourist
5 0 3

 Hey there !

Here's my shop :

https://le-corner-54.myshopify.com/

I'm struggling with a problem concerning my dropdown menu.
As you can see, the dropdown menu of the section "Nos soins" is completely messed up.

I'd like it to be fixed, and to be just right under "Nos soins".

Also, I'm pretty sure that the dropdown menu will disapear on hover when the cursor will leave the "nos soins" title. (It was like that before). So I'd like the dropdown menu to still be displayed when the cursor will go on it (I believe this is due to the padding I added to make the drodown menu right under the header).

One last thing, is it possible to remove or modify the icon of the dropdown menu ? (the small arrow next to soins).

 

Thanks a lot everyone !

 

dmwwebartisan
Shopify Partner
4477 1006 1285

Hey @Julia_Web 

add code assets/theme.scss.liquid bottom of the file

.site-nav__dropdown {
position: absolute !important;
width: fit-content;
}


Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Julia_Web
Tourist
5 0 3

Hey @dmwwebartisan

Your code worked perfectly even without the !important

Thanks !

One last thing though. Now I can't click on the dropmenu because it disappears as soon as I move my cursor on it.
Hard to explain, feel free to check.
It might be because of the padding I added in order to place the dropdown menu right below the header.

Is there a way to make it works like that ?

Thanks !

0 Likes
Julia_Web
Tourist
5 0 3

Hi,

I'm still looking for help on my hover menu please !

0 Likes
dmwwebartisan
Shopify Partner
4477 1006 1285

Hey @Julia_Web,

Sure, will check again and get back to you.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Julia_Web
Tourist
5 0 3

Hey @dmwwebartisan 

 

Thanks a lot for your time !

I've actually managed to make the dropmenu not disappear with this code:

.site-nav ul li span.site-nav__label { padding: 28px 0px 10px 0px; }

However, there's a slight offset when trying to reach the dropmenu's links.

If I reduce the padding more (let's say 27px), the menu will not stay on hover.

I believe my code is just bad haha and need some improvments. 

dmwwebartisan
Shopify Partner
4477 1006 1285

Hey @Julia_Web,

Ok, I will check and get back to you.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
dmwwebartisan
Shopify Partner
4477 1006 1285

Hello , @Julia_Web 

 I think your code is correct.

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
dmwwebartisan
Shopify Partner
4477 1006 1285

This is an accepted solution.

Hey @Julia_Web 

Please remove your css & try this css class.

add code assets/theme.scss.liquid bottom of the file

.site-nav__dropdown {
top: 28px;
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
Julia_Web
Tourist
5 0 3

Works perfectly !

Thanks a lot