How can I change the hover text and background colors of dropdown menu items ?

This topic has 3 replies, 2 voices, and was last updated 4 years, 4 months ago by Aizaz Imtiaz Awan.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
July 17, 2020 at 9:21 am #211894

rrb24397
Participant

I am using Cosmetics template based on woodmart theme for my website and i want to change the color of links in my menu and dropdown (Main Menu and My Account Dropdown Menu).
I am attaching a screenshot of the item.

Attachments:
You must be logged in to view attached files.

July 17, 2020 at 10:47 am #211916
Aizaz Imtiaz Awan
Keymaster
Hello,

First of all thanks for choosing our Theme, we are glad to be you in the WoodMart WordPress family :-).

I saw the screenshot you attached. Please try and add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

My Account Menu:
```
.woodmart-header-links .color-scheme-dark li a {
color: red;
}
```
My Account Menu Hover:
```
.woodmart-header-links .color-scheme-dark li a:hover{
color: red;
background: green;
}
```
For the Main menu dropdown:
```
.navigation-style-default .menu-simple-dropdown .color-scheme-light li a {
color: red;
}
```
If you want to ask anything else then provide with some relevant screenshot of the specific area to check it myself and help you out accordingly.

Best Regards.
July 18, 2020 at 3:49 am #212042
rrb24397
Participant
Yes, it worked for my account menu and all dropdowns as well as main menu dropdown. Please tell me the option so that I can add the same effect on my account option and other icons like add to cart and wishlist Icon in Header.

I am using this code:
```
.whb-color-light .navigation-style-default .item-level-0>a:hover{
    color:rgba(126, 211, 33, 1);
}
.whb-color-light .navigation-style-default .item-level-0.current-menu-item>a{
    color:rgba(126, 211, 33, 1);
}
/*.basel-navigation .menu > li  .sub-menu li a:hover > strong{
		color:rgba(126, 211, 33, 1);
}*/

.whb-color-light .navigation-style-default .menu > li .sub-menu li a:hover{
		background-color: #222;
		color: rgba(126, 211, 33, 1);
}

.woodmart-header-links .color-scheme-light a:hover {
	color: red;
}

.woodmart-header-links .color-scheme-light li a {
	color: #eee;
}

.woodmart-header-links .color-scheme-light li a:hover{
	color: rgba(126, 211, 33, 1);
	background: #222;
}
```
July 18, 2020 at 6:57 am #212058

Aizaz Imtiaz Awan
Keymaster

Hello,

The effect on the my-account and the icons in the menu is the same by default. And I have tested on your website the same there as well.

Screenshots for Clarification: https://ibb.co/N1LykMg
https://ibb.co/DGCWbFH

If you want to ask anything else then provide with some relevant screenshot of the specific area to check it myself and help you out accordingly.

Best Regards.
Author

Posts