Logo in Header Getting Squished on Scroll

In Screenshot 1, you will notice our logo “IT Specialists” in the top left corner. This is how the logo is supposed to look.

In Screenshot 2, you will notice the logo is squished. This is because the white header bar behind the logo compresses as soon as you scroll down the page.

Can you please tell me how to fix this, so that our logo doesn’t get squished when someone scrolls down the page? Is there a way to stop the white header bar from squishing when someone scrolls down the page?

NOTE: Turning off the “Add width and height attributes” for the logo inside the Header Builder is NOT a solution because it creates PageSpeed issues. In other words, the PageSpeed report is telling me that “Image elements do not have explicit width and height”. And this is why I had to turn on the “Add width and height attributes” setting.

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.wd-logo img {
    width: auto;
    object-fit: contain;
}

Kind Regards

[Author]

Posts