Mobile Logo not displaying correctly



The Logo Completely overlaps the header in mobile mode.
If I disable the mobile logo in WP customize options, the logo defaults to the desktop size.

Desktop Header:

mobile Header:

I am VERY NEW to CSS etc, Please make the answers detailed and simple so I can follow the directions

Thank you

Any chance you can make the header part of the logo for mobile?
Then I can give you the code to hide desktop background on mobiles.

Wow!!! Fast reply and easy solution!!!
That idea worked. I combined header and logo image.
Used combined image in logo and removed header pic from customise options

Is that acceptable?

Acceptable, but the better way to do it would be.

  1. Don’t combine the logo and header on desktops.

  2. Your current combined mobile logo is perfect.

  3. Add this to Additional CSS in customiser to hide the background image on mobiles.

    @media only screen and (max-width: 768px) {

Try to get rid of this line on mobile logo

Also, your shortcodes are broken.

Partially worked.

The mobile logo image kept becoming over compressed and dithered. I tested the mobile logo using the desktop logo, and same thing happened.

I have removed the:
- Mobile logo from custimisation,
- Header image from desktop

all I have now is Desktop logo enabled: that displays well in mobile, but the padding is off in desktop

Ideally you should do what I suggested earlier. But if you are ok with having background and logo combined one desktops, here is the code to fix the padding.


You can remove the code I gave earlier.

I did as you said, but the mobile logo comes out pixilated then.

Sent you a personal message. Please check.

The pixelated logo on mobiles is an issue form our side. Will fix and release an update today.

Thank you, I love your support!!! great product!

1 Like

Thank you.
Pushed the update, v2.13.
It should take care of the mobile logo issue.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.