[Resolved] Change background color of menu items on mobile

[David]

Hi,

I’m totally stuck.

I need to make it so that, on mobile, when I open the hamburger menu, the options that appear have a background color.

Sounds fairly simple doesn’t it!?

But in Customize I cannot find a setting that affects this. I’ve tried changing every single color to red, just so I can identify the relevant field. Everything changes to red, the navigation bar background, the text, the background on hover, etc etc. But the background of those tier-two, un-hovered menu items stays white.

I’ve set up an admin account. If you could have a look that would be very much appreciated.

Dave

[David]

Cancel that. It’s bloody working now.

I’ll update this if I figure out why.

[Leo]

Glad to hear 🙂

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

[David]

So it turns out my confusion was because Customize – Colors – Primary Navigation – Parent Items – Background controls both the color of the nav bar (if that’s the correct term? I mean the screen-wide section at the top of the page that contains the logo, the menu and the search) AND the color of the menu items.

This is a problem because it means if I want a white nav bar, when I open the menu I can barely see the options because the background of the options is also white, and only the text is visible.

Is there any way GP can get round this?

Thanks,

Dave

[David]

Hi there,

can you share a link to your site where we can see the issue.

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

[David]

Hi,

It’s wavetothe.site

I’ll add login details below.

Thanks.

[Leo]

Hi there,

Just to confirm, is the issue here that you want the two sections here to have different colors?
https://www.screencast.com/t/Mm2tpBuOnLH

If so, uncheck the navigation as a header option in the customizer:
https://docs.generatepress.com/article/navigation-as-a-header/

Then set the navigation location to float right:
https://docs.generatepress.com/article/navigation-location/

Then you can control the colors of the two sections using the header background color and navigation background color.

Let me know if this helps 🙂

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

[David]

Hi Leo,

That was pretty much the solution, thanks.

The only remaining issue was that once I’d done the above, the menu disappeared from all pages but the home page. So I changed the function to the following and it seems to be doing the job:

add_filter( ‘generate_navigation_location’,’to_move_navigation’ );
function to_move_navigation( $location )
{
if ( is_page() ) {
return ‘nav-float-right’;
}
if ( is_single() ) {
return ‘nav-float-right’;
}
if ( is_category( $category = ” ) ) {
return ‘nav-float-right’;
}
}

Thanks very much,

Dave

[Leo]

Glad to hear 🙂

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

[Author]

Posts