- This topic has 9 replies, 4 voices, and was last updated 1 year, 6 months ago by
Tom.
-
AuthorPosts
-
May 8, 2019 at 9:36 am #893143
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!
May 8, 2019 at 11:55 am #893291Leo
StaffCustomer SupportHi 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/May 8, 2019 at 2:26 pm #893424Greg
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 #893499Tom
Lead DeveloperLead DeveloperHi 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-developmentMay 9, 2019 at 8:06 am #894247Greg
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 #894350Tom
Lead DeveloperLead DeveloperGlad you got it working π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 4, 2019 at 6:37 pm #949409Kelly
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 #949878Tom
Lead DeveloperLead DeveloperHi 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-developmentJuly 5, 2019 at 9:18 am #949939Kelly
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 #950163Tom
Lead DeveloperLead DeveloperAwesome, 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 -
AuthorPosts
- You must be logged in to reply to this topic.