This topic has 11 replies, 3 voices, and was last updated 3 years, 6 months ago ago by Dox
How to change the dropdown menu hover color
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
The code works fine, but we are looking to add the line beneath the active menu hover just like this:
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
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:
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
Hi, I have remove the previous and inserted the new code, but the issue is still there.
Please have a look at the pic:
Hello,
Please provide temporary wp-admin access.
Regards
OK. I am giving you the temporary WP Dashboard Access. Please try to solve the problem as soon as possible
Clear cache and check now. I’ve deleted this custom CSS code – http://prntscr.com/v4b1lr
Regards
thanks the issue clears now
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