[webformation99]

Hello, would like to confirm a couple of things regarding use of logos on header.
I’ve trawled the previous posts regarding the logo size and found the suggested CSS code to use however it doesn’t seem to resolve my issue.

#header #logo img.grosso_mobile_logo {
max-height: 122px;
max-width: none !important;
}

Logo currently loads fine on page load but when I scroll down the logo disappears. I have uploaded 3 versions for logo / transparent alt logo and mobile. However the mobile logo size cannot be reduced to the recommended 50x50px as my design and length prohibits that option. My minimum width is 122×50 currently smaller than that it’s not readable.

Is there additional code I can use the override the size restriction please?

Thanks
PS Love Grosso it’s the best!!!

[Althemist]

Hello webformation99,

Actually, there is no limitation on the width of the mobile logo (also used for sticky header), so the 122px should be fine with your code.

If you give us a link to your site, we can check what’s wrong and why it does not appear.

Regards,
Dimitar

[webformation99]

This reply has been marked as private.

[Althemist]

You’d also need to set max-width: none; to .#header #logo a and #header #logo img

[webformation99]

This reply has been marked as private.

[Althemist]

That’s because of you custom CSS changes you made. Right now the active state of the mobile logo is set to top: -122px. In the original theme code it is top: -80px. In your case it must be changed to top:-50px.

#header.grosso-sticksy #logo img.grosso_mobile_logo {
    top: -50px;
}

Also, you can leave it’s default position (-80px) if you use a 80x80px image.

[Author]

Posts