Archived topic

Change text color for hover/click on mobile menu

9 replies · Started by Greg on May 8, 2019

Viewing posts 1–10 of 10

May 8, 2019 at 9:36 am #893143

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!

May 8, 2019 at 11:55 am #893291

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 :)

May 8, 2019 at 2:26 pm #893424

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!

May 8, 2019 at 4:25 pm #893499

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 :)

May 9, 2019 at 8:06 am #894247

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;
}

May 9, 2019 at 9:13 am #894350

Glad you got it working :)

July 4, 2019 at 6:37 pm #949409

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!

July 5, 2019 at 8:15 am #949878

Hi there,

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

#mobile-header {
    background: #fff;
}

Let me know :)

July 5, 2019 at 9:18 am #949939

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

July 5, 2019 at 4:29 pm #950163

Awesome, glad you got it working :)

This archived topic is closed to new replies.

Start building better websites today.