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

Home Forums Support [Resolved] menu background and opaque background disappear on mobile menu

Home Forums Support menu background and opaque background disappear on mobile menu

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1605308
    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!

    #1605536
    David – K360

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

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

    #1605709
    Leo
    Staff
    Customer Support

    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

    #1608858
    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

    #1608889
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

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

    #1610012
    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!

    #1610179
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.