menu background and opaque background disappear on mobile menu

I have this issue as well.... the background color on the main menu (white) disappears in mobile mode....

Never mind! Upon reviewing with fresh eyes, I found in my case that I had failed to set the Background color for the Parent Items in the colors for Primary Navigation (i.e., Customizer > Colors > Primary Navigation > Primary Items > Background).....

Hi John,

Just to confirm, do you want to keep the opacity for the sticky navigation?

Or you'd prefer a solution similar to this?
https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements

not talking about the sticky menu, just talking about the mobile menu drop down it loses the menu background and the header background overlay also disappears.

thanks
John

Hi,

To clarify: You want the same opaque background applied to your mobile header? If so, you can add this CSS:

nav#mobile-header {
    background: rgba(10,10,10,0.45);
}

This is how it would look like: https://share.getcloudapp.com/Koul8NWw

If you want to make the header and the menu items less opaque when the dropdown is toggled, you can add this in:

nav#mobile-header.toggled {
    background: rgba(10,10,10,0.85);
}

This is so the text behind the menu items are not to distracting.

John: My problem seems to have been the same as what you are describing. If you see above, the solution for me was simply to re-visit and re-set the values for the color of the Primary Nav in the Customizer. If no value entered for the color (i.e., if left blank / default), the menu background in mobile format (and only in mobile format) becomes transparent. Thus for my issue, no CSS was required to fix the problem of the mobile-version header background (on which my site's logo and menu float) going transparent...

Maybe not your issue but I thought I'd reiterate my own solution to a problem that seems similar to your own....

thanks for that, Elvin that code got me where i needed thanks! I guess i was assuming the drop down background of the desktop menu would get applied as the background for the mobile hamburger pop out menu but i guess it still takes the main top level background not the children background so i set this in the end

/* set opacity and background on mobile header and menu */
nav#mobile-header {
    background: rgba(10,10,10,0.45);
}
nav#mobile-header.toggled {
    background-color: #972735;
}

thanks!

John: My problem seems to have been the same as what you are describing. If you see above, the solution for me was simply to re-visit and re-set the values for the color of the Primary Nav in the Customizer. If no value entered for the color (i.e., if left blank / default), the menu background in mobile format (and only in mobile format) becomes transparent. Thus for my issue, no CSS was required to fix the problem of the mobile-version header background (on which my site’s logo and menu float) going transparent…

Thank you for sharing.

@John

Nice one. Glad you got it sorted. :)