Change background color of menu items on mobile

Cancel that. It's bloody working now.

I'll update this if I figure out why.

Glad to hear :)

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

Hi there,

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

Hi,

It's wavetothe.site

I'll add login details below.

Thanks.

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

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

Glad to hear :)