I’ve looked in the message board and this issue is slightly different.
In IE the logo I’ve uploaded into Ultra (premium) is very large – in fact it cuts off part of the logo it’s so big. When the logo resizes as I scroll down it is still too large and cuts off the logo.
This issue doesn’t exist in Firefox, Safari or Chrome.
Hi J
Thanks for reaching out 🙂 I’ll reply to your email shortly. Chat further then.
I have the same problem with IE clipping my site logo (the right part of it, towards the menus)
I have tried de-activating the retina logo, without success. I have reduced the size of both the regular and retina logos to 360x 60 and 800×130 respectively and re-activated the retina logo, still the problem persist. IE version is IE10.
Hi jfcyr
Thanks for reaching out. Please, send a link to your site and we’ll take a look.
This reply has been marked as private.
Thanks 🙂
Please, try the following:
1. Plugins > Add New: Install Simple Custom CSS.
2. Go to Appearance > Custom CSS and insert the following:
/* Header */
.site-header .site-branding-container {
max-width: 45%;
}
.main-navigation {
max-width: 65%;
}Let me know how that goes. Thanks 🙂
Thanks, I have add they to the SiteOrigin CSS plugin. I will ask some colleagues to confirm that this solved our problem (I am on a mac and cannot replicate the problem with the built-in validation tools of Safari).
I’m in the same position. Please, let me know what the team says 🙂
Hello
It has not cleared the problem. A bit more of the logo is showing, but it is still cropped.
I also checked more closely on Safari on the mac and the last few pixels are clipped (the ®)
BTW, shouldn’t the max-width of the main navigation and site-branding container add up to 100% ?
Apologies, yes, 100% total.
The logo is clipped at the source. Will link the URL below. New CSS will be:
/* Header */
.site-header .site-branding-container {
max-width: 45%;
}
.main-navigation {
max-width: 55%;
}This reply has been marked as private.
We now have 45 and 55, still it is clipped on Safari.
Should I create a new logo file with a bit more “padding”
No that shouldn’t be necessary. Do you see the R being clipped at source though? Will revert with another solution for the main issue in a moment.
This reply has been marked as private.
Super, thanks.
Retina Logo
The Retina logo is currently 801 x 130, it should ideally be 720 x 118 as your base logo size is 360 x 59
Please, also add to Custom CSS:
/* Logo */
.site-header .site-branding img {
width: 100%;
}I just checked the email with the original poster of this thread. I think older versions of IE might not like the current width: auto; being used on the logo image.