Return to previous page

How to change the dropdown menu hover color?

This topic has 11 replies, 3 voices, and was last updated 3 years, 6 months ago ago by Dox

Dox

Participant

October 16, 2020 at 19:40

How to change the dropdown menu hover color

#255396 Copied Theme version: 7.0.2 WooCommerce version: 4.6.0

10 Answers
Rose Tyler

Support staff

October 17, 2020 at 07:49
Hello,

You can use the next custom CSS code:
```
.et_b_header-menu .nav-sublist-dropdown .item-link:hover {
    opacity: 1;
    color: #6aa5cb !important;
}
```
Regards
#255430 Copied
Dox

Participant

October 17, 2020 at 18:55

The code works fine, but we are looking to add the line beneath the active menu hover just like this:

https://ibb.co/6X5PBBT

#255525 Copied
Rose Tyler

Support staff

October 18, 2020 at 08:16
Try to add this code also:
```
.et_b_header-menu .nav-sublist-dropdown .menu-item:before {
    content: '';
    height: 2px;
    width: 0;
    right: 0;
    position: absolute;
    transition: width .2s ease-in-out;
    bottom: 0;
    background-color: #6aa6cb;
}
.et_b_header-menu .nav-sublist-dropdown .menu-item:hover:before {
    width: 80%;
    left: 25px;
    right: auto;
}
```
or this one:
```
.et_b_header-menu .nav-sublist-dropdown .item-link:hover {
    text-decoration: underline;
}
```
Regards
#255563 Copied
Dox

Participant

October 19, 2020 at 18:45

Dear, code works as expected, but it has one issue as the menu line is exceeding the name of the menu. I want to fix the line length as per the length of the menu name. Please check the following pic in order to get better understanding of the issue:

https://ibb.co/rGhK9FB

#255733 Copied
Olga Barlow

Support staff

October 20, 2020 at 16:09
Hello,

Remove all code before and add the next one
```
.et_b_header-menu .item-design-dropdown .nav-sublist-dropdown ul > li > a {
    width: auto;
    display: inline-flex;
    position: relative;
}

.et_b_header-menu .nav-sublist-dropdown .menu-item .item-link:before {
    content: '';
    height: 2px;
    width: 0;
    right: 0;
    position: absolute;
    transition: width .2s ease-in-out;
    bottom: 0;
    background-color: #6aa6cb;
}
.et_b_header-menu .nav-sublist-dropdown .menu-item > .item-link:hover:before {
    width: 100%;
    left: 0;
    right: auto;
}

.et_b_header-menu.et_element-top-level .nav-sublist-dropdown .item-link, .site-header .widget_nav_menu .menu > li > .sub-menu a, .site-header .etheme_widget_menu .nav-sublist-dropdown .item-link {
    padding-left: 0;
    padding-right: 0;
}

.et_b_header-menu.et_element-top-level .item-design-dropdown .nav-sublist-dropdown:not(.nav-sublist), .et_b_header-menu.et_element-top-level .item-design-dropdown .nav-sublist-dropdown ul > li .nav-sublist ul, .et_b_header-menu.et_element-top-level .item-design-mega-menu .nav-sublist-dropdown:not(.nav-sublist) {
    padding-left: 1.9em !important;
    padding-right: 1.9em !important;
}
```
Regards
#255825 Copied
Dox

Participant

October 20, 2020 at 17:50

Hi, I have remove the previous and inserted the new code, but the issue is still there.

Please have a look at the pic:

https://ibb.co/mvyhLk7

#255839 Copied

Rose Tyler

Support staff

October 21, 2020 at 08:28

Hello,

Please provide temporary wp-admin access.

Regards

#255889 Copied

Dox

Participant

October 21, 2020 at 17:43

OK. I am giving you the temporary WP Dashboard Access. Please try to solve the problem as soon as possible

Please contact administrator
for this information.

#256012 Copied

Rose Tyler

Support staff

October 22, 2020 at 07:11

Clear cache and check now. I’ve deleted this custom CSS code – http://prntscr.com/v4b1lr

Regards

#256059 Copied

Dox

Participant

October 23, 2020 at 01:04

thanks the issue clears now

#256148 Copied
Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘How to change the dropdown menu hover color?’' has been successfully resolved, and the topic is now closed for further responses

How to change the dropdown menu hover color?

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection