Close

hover color of the nav links to remain the same when the mouse goes into the dropdown box

LMOS
11 years ago
#3719 Quote
Avatar
  • 3
how can i get the hover color of the nav links to remain the same when the mouse goes into the dropdown box?
http://www.jomobags.com/merchandise-bags
Support
11 years ago
#3816 Quote
Avatar
  • Moderator
  • 1044
LMOS wrote:
how can i get the hover color of the nav links to remain the same when the mouse goes into the dropdown box?
http://www.jomobags.com/merchandise-bags


Hi,

We have answered you in our email, but just to post the solution here, so that others can benefit from it to:

"
You should make the following change in the MegaMenu.css file

from
.mega-menu > li > a:hover {
color: #ffffff;
}

to

.mega-menu > li:hover > a {
color: #ffffff;
}

The line in bold is the changed one.
"
baloghc
11 years ago
#3822 Quote
Avatar
  • 79
Is there a way to change the highlight (hover) color of the subcategories in the unlimited subcategories version of the 3.2 Mega Menu?

This was the ".mega-menu .box li a:hover {" in the previous Mega Menu version.
Nop 3.7 - ArtFactory
Nop 4.0 - Lavella, Venture, Smart, ArtFactory
Support
11 years ago
#3828 Quote
Avatar
  • Moderator
  • 1044
imprintableswarehouse wrote:
Is there a way to change the highlight (hover) color of the subcategories in the unlimited subcategories version of the 3.2 Mega Menu?

This was the ".mega-menu .box li a:hover {" in the previous Mega Menu version.


Hi,

You can change the hover color as you wish. The styles for the infinite subcategories list are placed in the Themes\Electronics\Content\CSS\styles.css because these styles are used for both the infinite subcategories template of the Nop Mega Menu plugin and the default nopCommerce's top menu.

So in order to change the link color on hover you need to edit the following styles:

.header-menu .sublist li:hover {
background: rgba(0,0,0,0.05);
}

.header-menu .sublist li:hover > a {
color: #000;
text-decoration: none;
}

Hope that helps!
baloghc
11 years ago
#3829 Quote
Avatar
  • 79
Figured it out. I just added this to the MegaMenu.css file.

.mega-menu .sublist li:hover {
background: rgba(0,0,0,0.05);
}

.mega-menu .sublist li:hover > a {
color: #FFFFFF;
text-decoration: none;
}

Thanks for the help!
Nop 3.7 - ArtFactory
Nop 4.0 - Lavella, Venture, Smart, ArtFactory