[Resolved] menu background and opaque background disappear on mobile menu

[John MacKenzie]

The opaque background disappears that i have on the main menu so how do I set that

and the drop down menu formatting looks odd now there is no background colour anymore.

thanks!

[David – K360]

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

[David – K360]

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)…..

[Leo]

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

[John MacKenzie]

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

[Elvin]

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.

[David – K360]

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….

[John MacKenzie]

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!

[Elvin]

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. 🙂

[Author]

Posts