• Resolved parkerchris76

    (@parkerchris76)


    Hi,

    I am trying to find out how to change the background colour of the menu on my site when viewed on a mobile device.

    I have a dark header and light text for the menu – but on mobile this changes to a drop down menu with a white background and therefore the text is impossible to read

Viewing 12 replies - 1 through 12 (of 12 total)
  • Theme Author WP Cake

    (@wpcake)

    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;
      }
    }
    Thread Starter parkerchris76

    (@parkerchris76)

    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 🙂

    Thread Starter parkerchris76

    (@parkerchris76)

    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 :/

    Theme Author WP Cake

    (@wpcake)

    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?

    Theme Author WP Cake

    (@wpcake)

    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, 6 months ago by WP Cake.
    Thread Starter parkerchris76

    (@parkerchris76)

    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 http://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

    Theme Author WP Cake

    (@wpcake)

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

    Thread Starter parkerchris76

    (@parkerchris76)

    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 :/

    Theme Author WP Cake

    (@wpcake)

    Hi,

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

    Thread Starter parkerchris76

    (@parkerchris76)

    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)

    Theme Author WP Cake

    (@wpcake)

    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.

    Theme Author WP Cake

    (@wpcake)

    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, 5 months ago by WP Cake.
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Menu Background Colour on Mobile’ is closed to new replies.