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):
- MY site before switching from menu text to menu symbol (all good here)
- MY site just after switching from menu text to menu symbol (body shifts UP = not good)
- 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:
- Note the white margin between the black header and the image)
- 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:
- 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?