Menu Background Colour on Mobile

Hi @parkerchris76

We will plan a more permanent fix for this but for now you can try adding some custom CSS. the styles below should be able to help:

@media (max-width: 789px) {
  header nav{
    background: #000;
  }
}

Awesome – Thanks – I eventually worked this out by plugging my phone in and inspecting elements to see which CSS class was being used then edited the style.css in the theme, but your recommended solution is far better and what I was hoping for – so thanks – I will use this instead.

Yes, an easier option in the theme settings would be great! I look forward to seeing that in future updates ??

Hey, Just following on from this, I have created a sub menu now – and this is also defaulting to white background. The CSS you gave me doesn’t affect that – Could you provide me with the css I need?

In addition, on desktop the backgrouns for the sub-menu is black despite changing the background colour in the customisation options :/

Hi, apologies for the slow response. If you haven’t got a fix for this yet, can you please provide your url so we can take a look?

Without seeing the website setup you could try:

@media (max-width: 789px) {
  header nav,
  header nav ul ul a{
    background: #000;
  }
}

This should ensure the menu background is black.

Thanks

• This reply was modified 3 years, 12 months ago by WP Cake.

Hi,

Thanks – The suggestion doesn’t work – I don’t want it to be black.

I actually want all menus – even sub menus to be #647295.

I already have the suggested CSS override and the main menu is fine – on both browser and mobile, it’;s submenus which don’t reflect.

My site is https://www.cheesecakechris.co.uk – You will see under the “About” menu is a sub menu and the background there is pale cream (#F2EBE5) – On desktop this is ok as the text is blue but on mobile you can’t read the text

Hi Chris, on mobile all menus appear to be #647295 now.

This is really strange…

On my mobile it is now ok, but on my laptop – on two different browsers I get different results, despite having force reloaded and cleared the cache several times :/

Hi,

can you please provide more information on which browsers you are testing and what they are displaying?

Sure…

Safari on iOS – Shows as expected (Blue background – F2EBE5, Cream Text – 647295)
Safari on MacOS (11.2.3) – Shows main menu as expected – sub menu as white text on black background
Chrome on same MacOS – Shows main menu as expected, submenu as Blue text (647295) on Cream background (F2EBE5)

OK different from me I think. I am getting:

Safari on iOS – Blue background – F2EBE5, Cream Text – 647295

Chrome on iOS – Blue background – F2EBE5, Cream Text – 647295

Safari on MacOS – submenu as Blue text 647295 on Cream background F2EBE5

Chrome on MacOS – submenu as Blue text 647295 on Cream background F2EBE5

Firefox on MacOS – submenu as Blue text 647295 on Cream background F2EBE5

So all looks fine from my end. I will ask a colleague to double check on their devices.

Hi,

Having looked at your site in a bit more detail I can see you have added some custom CSS that looks to be showing sub-menus with a cream coloured background and blue text.

If you want the sub menus to be blue background and cream text then find the following CSS in your custom css editor and swap the colours around:

header nav ul ul a{
background-color: #f2ebe5;
color: #647295;
}

• This reply was modified 3 years, 12 months ago by WP Cake.