Header logo and menu on mobile are invisible

Hi there,

I added a website logo into the West theme, and noticed that the logo and the menu look invisible (white on white). Is there a setting that I missed?

Here is the screenshot

Kind regards,
Andi

Hi Andi,

It seem likey you are having light logo imgae, that is shown on light menu background on mobile. So you’ll need a darker version of your logo to replace the current logo only on mobile screen by adding the below CSS code to Additional CSS under the Customize menu.

    @media only screen and (max-width: 1024px) {
      .site-branding a {
        display: inline-block; 
        max-width: 200px;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url('https://yourwebsite/path/to/darker-logo-file.png');
      }
      .site-branding a img {
        display: block;
        width: 100%;
        opacity: 0;
      }
    }

Add this code to change the default color of mobile menu from white to black.

    .slicknav_menu .slicknav_menutxt {
      color: #000;
    }

Regards,
Kharis
aThemes Support

Thank you Kharis. I had changed the logo to the darker one, and applied both custom CSS codes. This is the result:

Looks better, however the logo does not fill up the entire length of the screen. Is there a recommended size for the logo size?

Hi,

Thank you for getting back.

I’d recommend you change the text, that is part of your logo image, from white to dark. Upload it and update your CSS code.

Regards,
Kharis
aThemes Support

Thank you, much better now!

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support