[Resolved] Mobile menu not following the color settings from the web menu

[Sinartus]

Hi there. I have kind of figured out how to do a black background on both the website and mobile site headers. However, I can’t seem to figure out how to keep the mobile menu font and background colors to be the same as the website.

From the forum postings, it seems that the mobile colors should follow the default color settings. Am I missing something here? I have included the website below in the private information box. Thanks!

[Fernando]

Hi Sinartus,

Can you temporarily disable your caching/optimization plugins? We’ll check what’s causing the issue.

[Sinartus]

Hi Fernando,

I have just disabled it.

[Fernando]

It seems you may have server side cache as well. Can you reach out to your hosting provider, and ask them to clear it?

[Sinartus]

Hi Fernando,

The hosting provider has cleared all server and app level cache.

[Fernando]

Can you provide temporary admin login credentials? I’ll need to take a closer look.

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Sinartus]

Hi Fernando,

The username and passwords are below. Thanks.

[Fernando]

Thank you.

You have the colors set in the Header Element.

If you go to Appearance > Customize > Colors > Primary Navigation, the colors there should apply to the Mobile view.

Moreover, if you remove all colors in the Header Element, the color that should apply in all views is the Customizer color.

[Sinartus]

Oh my gosh, that was so simple. So for the color setting, should I use the Appearance setting and not touch the color setting on the Header Element? Was it the cache problem on my server that was causing this issue?

If you don’t mind, I want to clear up this process of creating the header. Getting where I am now in creating the header was a lot of trial and error, and if I had to set up another site, I might not remember all the steps as I am not sure which steps I need to take first.

Do you need an Element header to create a background-colored header that works for both desktop and mobile?

Another example that made me confused is where to upload the mobile logo. The option to upload the mobile logo in the Element Header did not show up until I first uploaded the logo within the Appearance section. So now there are 2 mobile logos, one in the Appearance section and one in the Elements Header section. Which one does the system use?

Would you be able to direct me to the appropriate instructions? Thanks, Fernando!

[Fernando]

It wasn’t the caching that was causing the issue. Sorry, I just missed noticing that the color was from the Header Element.

Nowadays, the Header Element is mostly used only for the Merge Feature. Nowadays, you can use a Block Element – Page Hero for the Page Hero, and the customizer settings for colors.

You don’t need a Header Element to change the colors, however, it may be useful if you want to change the color only for a specific page.

You can upload a Mobile Logo through Appearance > Customize > Header, if you have Mobile Header turned on. Then, setting the Mobile logo through the Header Element would be useful if you want a different mobile logo for a specific page.

Here’s the article for the Mobile Header: https://docs.generatepress.com/article/mobile-header/

So basically:

1. If you want a separate Logo on Mobile, turning on Mobile Header would be ideal, if not, you can turn it off.
2. Nowadays, Header Elements are mostly used for the Merge Feature. Or, if you want a different logo and colors on a specific page.
3. Ideally, you may set the colors through Appearance > Customize > Colors.

[Sinartus]

Hi Fernando,

As always, you are super helpful! So if I understand correctly, the Element section is if you want to have a specific page appear differently. If you want to setup a site where all the pages are the same, then setting up through the Appearance menu should do the job.

I will go over your tips and see if I can replicate all of them. Thank you so much.

[Fernando]

Yes, that’s correct in terms of the Header Element. You’re welcome Sinartus!

The other Elements – Block, Hook, Layout, have different use-cases for designing your website.

For reference, here’s the use case of a Block Element – Page Hero: https://docs.generatepress.com/article/block-element-page-hero/

A Header Element’s merge functionality could go along well with the Block Element – Page Hero for instance if you want your Page Hero to merge with your Header.

For instance, a design like this where the Page Hero is merging with the Navigation: https://share.getcloudapp.com/P8u727O0

[Author]

Posts