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

[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?

[Leo]

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 🙂

[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?

[Leo]

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 🙂

[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

[Leo]

Glad to hear it’s resolved 🙂

[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?

[Tom]

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?

[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?

[Tom]

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.

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

[Tom]

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.

[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?

[Tom]

I would do this:

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

[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?

[Author]

Posts