Pro Header Overlap

[Lorie]

Hi there and thanks for the help! As you can see, in the smallest mobile version of this header, the button is overlapping the logo. Is there a way to tell the logo to get smaller for this screen size so they don’t overlap?

Thanks!

[ruenel]

Hello @Lorie,

Thanks for writing in!

When I checked your page, I cannot replicate the issue. This is what I am seeing:

You may need to clear your plugin caches (if you have installed a plugin cache) and clear your browser cache or use private browsing mode and test your site again.

[Lorie]

Hi there. It works when you use the mobile version in Pro to see what it’s going to look like, but the screenshot is from my actual phone where the overlap happens. If there was a way to shrink the logo by a certain percentage then it wouldn’t happen.

[ruenel]

Hello @Lorie,

I have two screenshots. One is from the desktop and the other is from the actual mobile phone.
Anyways, please edit your header if you want to make the image a little bit smaller in the smaller screens. Click the image element and find the “Customize” tab and then insert the following code as the element’s inline css:

@media(max-width: 767px){
    $el img {
        max-width: 140px !important;
    }
}

We would loved to know if this has work for you. Thank you.

[Lorie]

That worked brilliantly! Thanks so much.

[rad]

You’re most welcome!