The problem (Excess White Space Above Admin Bar on Frontend Using Twitter Bootstrap):
While logged in and viewing the frontend — If you shrink your browser down, there is an excess amount of white space which appears ABOVE the admin bar. I’ve noticed it’s fine in full screen, and even ~tablet size. However, when about to shrink to anything smaller than about 600px, that’s when the white space appears ABOVE the admin bar. I have tested on my phone, and the white space is there on my phone too.
The Question:
Is this a conflicting issue with WordPress, or is there something I need to do with my Twitter Bootstrap setup?
Any advice on eliminating this excess white space above the admin bar while viewing the frontend (using Twitter Bootstrap — Responsive) on a mobile device would be greatly appreciated.
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}}It was something simple. I had
position: relative;set for thebody.Example:
I have no idea WHY that would effect it, but eliminating
position: relative;for the<body>tag fixed that excess white space above the admin bar on the frontend while browser size is < 600px.