[Resolved] Mobile Nav Dropdown Background Color in Header Element

[Andres]

Hello,

When time permits, could you please explain how to set the background color for the dropdown nav menu on mobile pages that have a header element? Currently, it’s transparent, and none of the settings in Site Header > Navigation Colors for the header elements in question have any affect, and neither do the color settings in Customizer for Navigation.

I’ve included the URL to one of the pages in the field for URLs.

Thank you!

Andrés

[Tom]

Hi there,

It should use the colors you’ve set in the Customizer when the mobile menu opens.

Can you confirm what values you have set for the navigation background color in Customize > Colors > Primary Navigation?

[Andres]

Hello Tom,

Thanks for the reply.

The background color in Customize > Colors > Primary Navigation is set to rgba(34,34,34,0). It’s set to 100% transparent, however, to make the nav bar transparent on posts and pages.

In looking into this further, I noticed that on a mobile phone, when the menu is expanded, it actually pushed the content down and create a grey block that looked like a background.

Note: I use a mobile phone when reviewing what the front-end looks like on mobile, not the representation of a mobile in Customizer.

On the home page and on category pages than have a header element for either a full-width slider or hero image, when the mobile menu is expanded, it does not push the content down. Instead, it overlays the header element and is transparent.

Is there any way to have the mobile menu push the content down on the pages with a header element as it does on the pages and posts that don’t have a header element? Perhaps that would be the easier solution.

Have a good night, Tom.

Andrés

[David]

Hi there,

the best solution would be to edit the Header Element > Site Header and set the Merge with Content ONLY on Desktop.

[Andres]

Hi David,

That did it!

Thanks,

Andrés

[David]

You’re welcome

[Andres]

Cheers!

[Author]

Posts