How to create a hover effect in Sense theme's dropdown menu?

Store Design
,
1

Hi everyone, I’m using the sense theme, managed to insert a code for the hover effect for my main navigation. For now the navigation looks like this:

Screenshot 2023-02-05 at 13.24.42.png
Screenshot 2023-02-05 at 13.24.42.png2880×1244 243 KB

Could you please help me to make it look like this (sorry for the blur, I don’t have a better picture).

lucylucy9608_0-1675599932490.jpeg
lucylucy9608_0-1675599932490.jpeg1170×506 23.4 KB

Website: https://glowbe-5723.myshopify.com

PW: 120896

Thank you so much for all the help!

2

Hi @lucylucy9608

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Add code below to bottom of file
@media(min-width: 750px){
    .header--top-center .header__inline-menu > .list-menu--inline > li{
        position: relative;
    }
    .header--top-center .header__inline-menu > .list-menu--inline > li .mega-menu__content {
        white-space: nowrap;
        width: fit-content;
    }
}
3

Thank you so much @EBOOST , would it be possible to make it round as shown in the example? And also, when I hover over the navigation, I don’t have the time to go to the drop down, because the subcategories disappear, do you maybe know how to fix this?

thank you in advance!

4

Hi @lucylucy9608

I suggest you add code below

@media(min-width: 750px){
    .header--top-center .header__inline-menu > .list-menu--inline > li:hover .mega-menu__content {
        border-radius: 10px;
    }
    .header--top-center .header__inline-menu > .list-menu--inline > li:hover .mega-menu__content  {
        opacity: 1;
        transform: translateY(0);
        z-index: 1;
    }
}
5

Amazing, it works great, thank you!