Internet Explorer Header

This topic has 20 replies, 3 voices, and was last updated 8 years, 2 months ago by Andrew Misplon.

Tagged: formatting header Internet Explorer

Author
Posts
May 11, 2016 at 7:51 pm #3469

jmcfarland
Participant
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.
May 12, 2016 at 12:35 pm #3471

Andrew Misplon
Keymaster
Hi J
Thanks for reaching out 🙂 I’ll reply to your email shortly. Chat further then.
October 6, 2016 at 4:43 pm #5037

jfcyr
Participant
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.
October 6, 2016 at 4:58 pm #5038

Andrew Misplon
Keymaster
Hi jfcyr
Thanks for reaching out. Please, send a link to your site and we’ll take a look.
October 6, 2016 at 5:07 pm #5039

jfcyr
Participant
This reply has been marked as private.
October 6, 2016 at 5:12 pm #5040
Andrew Misplon
Keymaster
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 🙂
October 6, 2016 at 5:17 pm #5042

jfcyr
Participant
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).
October 6, 2016 at 5:25 pm #5043

Andrew Misplon
Keymaster
I’m in the same position. Please, let me know what the team says 🙂
October 6, 2016 at 5:36 pm #5044

jfcyr
Participant
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% ?
October 6, 2016 at 5:39 pm #5045
Andrew Misplon
Keymaster
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%;
}
```
October 6, 2016 at 5:39 pm #5046

Andrew Misplon
Keymaster
This reply has been marked as private.
October 6, 2016 at 5:43 pm #5047

jfcyr
Participant
We now have 45 and 55, still it is clipped on Safari.
Should I create a new logo file with a bit more “padding”
October 6, 2016 at 5:44 pm #5048

Andrew Misplon
Keymaster
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.
October 6, 2016 at 5:48 pm #5049

jfcyr
Participant
This reply has been marked as private.
October 6, 2016 at 5:53 pm #5051

Andrew Misplon
Keymaster
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
Author
Posts