Compatibility with safari

I tested my site today with safari on Ipad. In portrait mode the header looks fine but in landscape mode, the header looks wrong and the logo is not properly displayed on top. My site is and I’m not sure if you have safari available somewhere, else I will see if I can get a screen shot somehow.

Do I have control in my Sydney pro team to ensure proper display in safari or is there a known issue?

Thanks René

Here is the screen shot:

Hello there,

It isn’t considered as a known issue. For some reason, some piece of CSS code which manage its position on a screen whose resolution less than 1025px can’t be read. Please try adding the following CSS code into your site’s additional CSS option which resides under the Appearance > Customize > Additional CSS.

@media only screen and (max-width:1024px) {
   .site-header.fixed {
      position: static !important;


Hello Kharis.

Thanks, i meanwhile found that it is not related to Safari, but the issue happens during one specific resolution only in various browsers. Your code seems to work, but increases my SCC and reduces my score on page speed check. So out if curiousity, have I done something to my site that causes this issue to happen? If it is not a known issue with sydney, I would expect it to be the result of something I customised to the theme, or? Any way to find that out or would I need to remove the components of my site one by one to find out what causes the issue?


So, any hint what may have caused the header to function incorrectly, or must i de-activate plugins one by one, remove css codes one by one to see when the issue returns? I just find it very strange that only one particular resolution results in the incorrect header. You help to search into the correct direction would be appreciated, as I would prefer to not solve the issue via additional CSS code.


No response anymore?


Hello there,

There is no any other way to add custom CSS other than via additional CSS since you haven’t yet running a child theme. Try to minify the CSS code using this tool; it will look like this:

@media only screen and (max-width:1024px){.site-header,.site-header.fixed{position:static!important}}


Hello Karis,

It just annoys me that all responsive resolutions work fine, except for one. When I remove all of my CSS code, I see the same effect happening (although it’s less obvious, because the transparency of my header is then gone). And you know what, I just found that the SAME happens in the default Sydney template. THis shows me that it is a Theme issue, not an issue with my webpage. I will try to eplain this once more in detail so you can follow it.

The problem appears when the site switches from displaying menu text to displaying the meny symbol (three strips). When that occurs, the VERY FIRST layout shifts the body UP a bit. Then if you continue to decrease the page further, the body shifts back DOWN. If you do not have a transparant header, it’s no issue and not obvious. But if you do have a transparent header like I do, the issue does become visible.

Here’s the visualisation (note that for this, I have of course temporarily removed your fix for the 1024 width):

  1. MY site before switching from menu text to menu symbol (all good here)
  1. MY site just after switching from menu text to menu symbol (body shifts UP = not good)
  1. MY site when decreasing the size further (body shifts back DOWN where it should be, here it’s all good again)

Now I do the same with the standard Sydney DEMO theme and you will see that the body position also shifts up and down:

  1. Note the white margin between the black header and the image)
  1. Note that the white marin has DECREASED: the body has shifted up. Now on this DEMO site, it is not so obvious because a) the page has a relatively big white margin which allows to be “overlayed” without visual impact and b) the header is not transparent so any overlay would disappear behind the black header:
  1. Here the body shifts down again:

I hope my point is clear. Do you agree this is a Theme issue?

Apart from that, are you saying that using a child theme makes a site faster than using CSS code?

Any feedback about my theory please? By the way, you can check the behaviour yourself too of course when using the Sydney demo page.

Looking forward to hearing from you soon.


First of all, I would like to apologize that this has taken so long. You’re highly encouraged to use the contact form if there’s no reply from the forums though that doesn’t usually happen - I’m not sure why it did here.

I had a look at your site and indeed, there is a theme issue that happens at that specific resolution. We’ll handle it in the next update which is planned for the next few days, meanwhile you can keep the custom code you have. Once the update is available, you can remove the custom code.


Thanks Vlad, good to hear that the time I spent to figure this out appears to be useful.

The question I had embedded in a previous response was if using a child theme for enhancements, makes a site faster than when using CSS code.


Sorry about missing that question, I assumed you were only asking for the change mentioned in this topic.

In theory, no, it wouldn’t be faster because it’s one extra request as opposed to adding the code via Customize > Additional CSS which would add it through a tag.
The visible impact will be close to 0 in either case and your site loads instantly anyway.

So if you’ll just have a few changes, use the Additional CSS option, if you have more and need to better organize them or even include some PHP customizations, use a child theme.


On March 21st, Vlad wrote:

I had a look at your site and indeed, there is a theme issue that happens at that specific resolution. We’ll handle it in the next update which is planned for the next few days, meanwhile you can keep the custom code you have. Once the update is available, you can remove the custom code.

But in the recent update notes, I do not see a mentioning of the fix. Has the responsiveness issue been fixed or not?


It is indeed fixed in the update from March 27.