I just ran into this issue as well, the cause of this is that at 600 pixels wide the admin bar goes from being position:fixed to position:absolute;
When fixed, it is locked to the top of the screen (top:0)
When absolute it is locked to the top of the closest container that contains it. This is the html element by default, but if a parent is defined to have a position, (in our case body has a position definition) then it will contain all of its children, and their position rules will be based off of its position. Since the html element has a margin-top of 46 pixels, it pushes the body down by 46 pixels. So since the body is pushed down by 46 pixels, the best our admin bar can achieve is the top of our body not the top of the page.
If you need to have position:relative on the body then you can do a couple of things to get around this. You can add either of these rules to your themes css file and it’ll overwrite the default wordpress css.
-
You can override the admin bar position absolute rule, and flip it back to fixed. This will make the admin bar scroll with the page so that you always see it at the top no matter where you are on the page.
html #wpadminbar{position:fixed}; -
You can change the position of the admin bar to have a top of -46px in resolutions under 600px; This keeps the bar at the top of the page on small screens so that it doesn’t take up screen realestate as you scroll around.
@media screen and (max-width:600px){html #wpadminbar{top:-46px}}