[Resolved] Mobile Nav Dropdown Background Color in Header Element

Home Forums Support Mobile Nav Dropdown Background Color in Header Element

  • This topic has 6 replies, 3 voices, and was last updated 2 months ago by Andres.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1378423
    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

    #1378588
    Tom
    Lead Developer
    Lead Developer

    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?

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

    #1379015
    David
    Staff
    Customer Support

    Hi there,

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

    #1379160
    Andres

    Hi David,

    That did it!

    Thanks,

    Andrés

    #1379212
    David
    Staff
    Customer Support
    #1379384
    Andres

    Cheers!

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