How Can I Apply Custom Style To A Mega Menu Item When Hovering Over It? For Impulse Theme

Store Design
1

How can I apply custom color and weight to a menu item when hovering over it? I am hoping to have the color change on hover for the “home” and “Plus Size” drop down menus. My url is https://sensualsinsations.com

The following is code used to apply this to the 3rd level on “collections” drop down menu. The “plus size” and “home” drop down menus are only one level

.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link–top-level):hover{
color: #3b1453;
font-weight: bold;
}

menuhover2.png
menuhover2.png1920×1120 220 KB

menuhover1.png
menuhover1.png1920×1120 282 KB

2

Hi @SenSinsations
You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

.site-nav__dropdown:not(.megamenu) .site-nav__dropdown-link {
font-size: 24px;
font-weight: bold;
}

if you have any more questions, do not hesitate to contact with us

3

@ExpertRookie Thank you. I was able to get it to work, but had to do a little tweaking to your suggested code. Below is what I added to get the hover to work. Thank you again.

.site-nav__dropdown:not(.megamenu) .site-nav__dropdown-link:hover {
color: #3b1453;
font-size: 16px;
font-weight: bold;
}