[Resolved] Transparent Header Menu Colours (Desktop + Mobile)

Home Forums Support Transparent Header Menu Colours (Desktop + Mobile)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1294341
    Ian

    I may have missed something but I have a transparent header running using Elements just for the home page. For desktop, everything looks good. Once it switches into mobile, I want to add background colour of the Menu. Is this possible without custom CSS?

    #1294409
    Leo
    Staff
    Customer Support

    Hi there,

    Can you make sure the menu background color in the customizer is not set to transparent?
    https://docs.generatepress.com/article/colors-overview/

    Let me know if this helps 🙂

    #1294495
    Ian

    I see what your are getting at. So after choosing a background color inside Primary Navigation in the customizer, this fixed the homepage mobile menu background. To make the rest of the site consistent, I had to choose WHITE as the background colour of the Primary Navigation.

    One last issue now. Since this Primary Navigation of the background of the white, I selected an all black logo. This works for the rest of the site as there is no transparent background. I also selected black logo for mobile as the rest of the site has a white Header background. However, on the transparent homepage, I could only choose 1 logo inside Elements. I chose White as it works well with the transparent homepage in desktop. But on the homepage when it’s in mobile, the logo switches to the black (from the mobile logo above).

    How can I make the mobile logo to be white on the homepage?

    #1294652
    Leo
    Staff
    Customer Support

    I believe the mobile header logo option in the header element would help with this issue?
    https://www.screencast.com/t/njn1K3I9vbaj

    Let me know if I’m missing something 🙂

    #1294677
    Ian

    Hey Leo, guess what. That was a very smart idea. But I had to create a second Element and target it to the rest of the site and exclude the Homepage.

    So in short, let me document this just in case it helps others. I am sure I will have refer to it in the future.

    Customizer > Site Identity > Logo = Black logo with transparent background

    Customizer > Layout > Header > Mobile Header On > Logo = White logo with transparent background

    Element #1 > Header > Site Header > Merge with Content = Yes
    – Site Logo = White with transparent background
    – Display Rules = Front Page

    Element #3 > Header > Site Header > Merge with Content = No
    – Mobile Header Logo = Black logo with transparent background
    – Display Rules = Entire Site; Exclude = Front Page

    Customizer > Colors > Header > Background = White
    Customizer > Colors > Primary Header > Background = White

    I think that covers everything on me setup. Hope that helps.

    And as always, you are a magician Leo. Thank you!

    Now to sort out the logo size. Looks odd on my smallish smartphone versus testing in Chrome Mobile tools.

    Ian

    #1294689
    Leo
    Staff
    Customer Support

    Glad to hear it’s resolved 🙂

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