Changing Hover Color Of Menu Links

Developers Frontend
1

I am trying to customize my menu and make the background white. The only problem I'm having is the default color of a menu item being hovered over is white.

I can't find anywhere to change this setting. I have tried to customize the css in a lot of different ways. It seem like this should work but no luck:

This changes the font color to red.

.ty-menu__items .ty-menu__item .ty-menu__item-link {
color:red;
}
This does nothing and the hover color remains white.
.ty-menu__items a:hover, .ty-menu__item a:hover, .ty-menu__item-link a:hover {
color:red;
}
Any help is much appreciated!
2

Please try

.ty-menu__items .ty-menu__item .ty-menu__item-link:hover {
    color:red;
}
3

Please try

.ty-menu__items .ty-menu__item .ty-menu__item-link:hover {
    color:red;
}

Worked perfectly. Thank you!

4

Please try

.ty-menu__items .ty-menu__item .ty-menu__item-link:hover {
    color:red;
}

This works great when I hover over the menu item, but when I move the cursor to the drop down sub menu, it turns the original menu item back to the default white.

Any suggestions?

5

In this case please use the following CSS:

.ty-menu__items .ty-menu__item:hover .ty-menu__item-link {
    color: red;
}
1 Like
6

In this case please use the following CSS:

.ty-menu__items .ty-menu__item:hover .ty-menu__item-link {
    color: red;
}

Thank you eComLabs!

7

You are welcome!

8

how to change hover submenu item background color
exactly like your menu code but wanna apply on submenu

9
  1. .ty-menu__items .ty-menu__item .ty-menu__item-link:hover { color: red; }
  • This rule targets any link (.ty-menu__item-link) that is a descendant of a menu item (.ty-menu__item), which is itself a descendant of the menu container (.ty-menu__items).
  • The :hover pseudo-class applies the style when the user hovers their mouse over the link.
  • The effect is to change the color of the link to red only when the mouse is directly over that specific link.
  • However, this rule does not maintain the red color when you move the cursor away to a submenu. Thus, the color reverts to its default (white in above case) when you move to a submenu.
  1. .ty-menu__items .ty-menu__item:hover .ty-menu__item-link { color: red; }
  • This rule is slightly different. It targets the link (.ty-menu__item-link) within a menu item (.ty-menu__item) when the entire menu item is hovered over, not just the link.
  • The :hover pseudo-class is applied to the .ty-menu__item, meaning the styles will be applied when the mouse hovers over any part of the menu item, not just the link.
  • This approach solves the issue with the first rule. Now, when you hover over a menu item and then move to its submenu, the main menu item remains red because the hover state is still active on the .ty-menu__item element.

In summary, the first rule changes the link color only when the mouse is directly over the link, causing it to revert to the default color when moving to a submenu. The second rule, changes the link color when the mouse hovers over any part of the menu item, maintaining the color even when navigating to its submenu.

10

Thanks for the information but i have tried code below and it takes effect on my main menu items, not the submenu.

.ty-menu__items .ty-menu__item:hover .ty-menu__item-link {
    color: #171717;
    background: #2AC0B6; 
}

and also below code:

.ty-menu__items .ty-menu__item .ty-menu__item-link:hover {
    color: #171717;
    background: #2AC0B6; 
}

both acts same.

11

Please try

.ty-menu__items .ty-menu__submenu .ty-menu__menu-item:hover .ty-menu__item-link {
    color: #171717;
    background: #2AC0B6;
}
1 Like
12

tried code but not affects on submenu

13

It can depend on the theme you use. Please share URL of your store

14
15

Please try

.ty-menu__items .ty-menu__submenu .ty-menu__submenu-item:hover .ty-menu__submenu-link {
    color: #171717;
    background: #2AC0B6;
}
16

Thanks.
applied it, and works. but it highlights the link only
I prefer highlight whole block of any link.
like sort menu here

image

17

You should with the styles E.g.

.ty-menu__items .ty-menu__submenu .ty-menu__submenu-items {
        padding: 0 !important;
}
.ty-menu__items .ty-menu__submenu .ty-menu__submenu-item {
        padding: 7px 15px 7px 15px;
}
.ty-menu__items .ty-menu__submenu .ty-menu__submenu-item:hover {
    color: #171717;
    background: #2AC0B6;
}

(!) Not tested

1 Like
18

Thanks
It works perfect.

1 Like