Change text color for hover/click on mobile menu

[Greg]

I would like to change the text color on my mobile menu when a user hovers or clicks on it. I would like to change it to #0080FF. Right now it is set to black which blends in with the background. I believe the issue is caused because I have my menu floated right on desktop, so it is taking that setting. What is the CSS class to make this change? I figured out how to set the current menu item but not when a user hovers/clicks on it. Thanks for your help!

[Leo]

Hi there,

By default, the mobile menu color should inherit the settings in the customizer (same as desktop).

It’s currently black because of this CSS you’ve added:

.mobile-header-sticky #mobile-header.toggled .main-nav>ul {
	  background: #000;
}

Is that actually what you wanted?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Greg]

I do want the background to be black on the mobile menu (it was white before and you couldn’t see it). I want the text to be a different color when a user hovers/clicks. If you click on a menu item on the mobile menu, you will see that it turns black and blends in with the black background. I want to change this text color. Thanks!

[Tom]

Hi there,

This should help:

.main-navigation .main-nav ul li:hover > a, 
.main-navigation .main-nav ul li:focus > a, 
.main-navigation .main-nav ul li.sfHover > a {
    color: #fff;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Greg]

Hey Tom,

In this situation, I’m only trying to change my mobile menu. I replaced .main-navigation with .mobile-header-sticky #mobile-header.toggled and it appears to work fine. See the code below. Thanks for your help.

.mobile-header-sticky #mobile-header.toggled .main-nav ul li:hover > a,
.mobile-header-sticky #mobile-header.toggled .main-nav ul li:focus > a,
.mobile-header-sticky #mobile-header.toggled .main-nav ul li.sfHover > a {
color: #0080FF;
}

[Tom]

Glad you got it working 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kelly]

My questions is along the same lines here. Using the code example above, I am trying to get the background color on only the mobile menu to be white and cannot get it to take.

.mobile-header-sticky #mobile-header.toggled .main-nav>ul {
	  background: #fff;
}

I have my main navigation displayed in the left column of the site which is set to transparent because I have a container background, but when it switches to mobile below the header with the transparency, the body background shows through.

I’ve spent several hours trying various things to no avail.

Thanks!

[Tom]

Hi there,

Are you using the mobile header? If so, try this:

#mobile-header {
    background: #fff;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Kelly]

That wasn’t it, but did manage to get it to work with this code and a media query:

@media screen and (max-width: 855px)
{
.main-navigation, .main-navigation ul ul {
    background-color: #fff !important;
}
}

The !important is important to get it to take.

Thanks

[Tom]

Awesome, glad you got it working 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts