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

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

Viewing 15 posts - 1 through 15 (of 18 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 🙂

    #1317583
    Ian

    Hey Leo,

    Odd, after setting this up, looks like the homepage transparent mobile logo is no longer showing. Not sure what happened. I have 1 element that controls the merge of the homepage to create a transparent header.

    I have tried uploading a mobile logo in this element. I have even tried to create a new element by itself and uploaded a mobile logo that is also a merge with header and targeted to the Front Page, still nothing.

    The weird thing is, the mobile logo show inside customzier when I choose mobile view. But it does not show on 2 smartphones or Chrome Inspect tool when choosing a smart phone emulator.

    Any ideas?

    #1318172
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    So just to confirm, you have:

    1. A black logo set as your standard logo
    2. A black logo set as your standard mobile header logo
    3. A white logo uploaded in the Header Element
    4. A white mobile header logo uploaded in the same Header Element

    Is that correct?

    #1318295
    Ian

    Thanks for jumping in here Tom. Really appreciate it.

    1. A black logo set as your standard logo
    Yes, in Customize > Site Identity, there is a black logo (transparent)

    2. A black logo set as your standard mobile header logo
    Inside Customize > Layout > Header > Mobile Header (On) > White Logo (transparent)
    If I choose Mobile view inside this section, it looks like the Homepage logo pulls from this. And since Homepage is transparent menu, I chose White.

    This was before I uploaded a mobile logo for the Element to merge the header of just the homepage. If I remove the Element mobile logo, then this setting takes over the homepage mobile logo. So I left it as White.

    3. A white logo uploaded in the Header Element
    Yes.

    4. A white mobile header logo uploaded in the same Header Element
    Yes, I have created a Header Element for just Homepage and for Rest of Site. Homepage Element does have mobile logo as white. Rest of Site mobile logo is black because regular pages have a white header background.

    If I disable mobile logo in the header element, it looks like the mobile logo is usually controlled by Customizer > Layout > Header. The Customize mobile preview shows the logo. I just cannot get the logo to show up in an iPhone or Chrome’s Inspect tool when choosing various mobile emulators.

    I have provided a link in my original thread. Feel free to check things out on the live site to see how the front page and the rest of the site handles the header and primary nav. Thanks!

    Any ideas?

    #1318509
    Tom
    Lead Developer
    Lead Developer

    I can see the HTML for the logo, but the Element CSS is hiding it. This means there’s either a bug in the Header Element, or there’s a funky option somewhere.

    Basically, the logos you set in the Customizer should be for the entire site. So if it’s a white background, your Customizer logos should be black.

    Then, wherever you have a Header Element where the black logo doesn’t work, you should upload white logos in that same Header Element.

    Can you confirm that’s your current set up? If so, I’ll need to try to reproduce on my end to see if it’s a bug.

    #1318839
    Ian

    Hey Tom,

    Since the logo was properly displayed when I opened this ticket, I figured something must have changed. You comments made me approach this another way so I spun up a staging site on a different IP using the same domain. Found out it was Autoptimize hiding the mobile logo on the homepage! Normally I disable “Aggregate CSS-files?” as it sometimes causes too many issues in the long run. Turns out, this was the exact cause!

    Now that the homepage mobile logo is showing again, I actually noticed that even though the Element that controls the homepage transparent header does not contain a mobile logo, the white mobile logo set inside Customizer > Header > Mobile Logo still showed the proper mobile logo on the homepage. Interesting.

    Thanks for your helpful comments. This is now fully resolved!

    One last question. Is there a way to adjust the menu item height in the mobile menu without affecting the mobile logo height? Right now, using Menu Item height to adjust the menu items also changes the mobile logo height.

    #1319543
    Tom
    Lead Developer
    Lead Developer

    As of right now the height option controls both. However, you can just use CSS to alter the height of the mobile logo – happy to help with that if need be.

    #1319557
    Ian

    Thank you. Let me try it out and see how far I get. Thanks for your help Tom, as always!

    Used Microthemer to target this. Have a feeling it’s not the best selector but it does work lol

    #menu-primary-menu-1 a {
    height: 50px;
    border-bottom: 1px solid rgb(223, 223, 223);
    }

    Add-On: Now that I think about it, this might affect sub menu items if I had any in the future. Is it possible to grab the css target for just mobile dropdown menu items?

    #1319937
    Tom
    Lead Developer
    Lead Developer

    I would do this:

    .main-navigation.toggled .main-nav > ul li a {
        height: 50px;
        border-bottom: 1px solid rgb(223, 223, 223);
    }
    #1319951
    Ian

    Totally trust your code! Done.

    One last question. I used to load these inside styles.css of the child theme. What do you think about using a snippet plugin to contain all css and functions? What about using Additional CSS inside Customizer? Will these stay if themes are switched? I know sometimes Site Logo and 1 other item is lost when you switch themes.

    Add-On: Wait a sec. The CSS you provided did not take. Tried clearing all cache and even inside Customizer > Additional CSS, the preview panel does not take. Any ideas?

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