[wp-trac] [WordPress Trac] #26609: Admin Bar pushed down at screens of 600px width and lower on the frontside

[WordPress Trac]

#26609: Admin Bar pushed down at screens of 600px width and lower on the frontside
---------------------------------------+-----------------------------
 Reporter:  Funkatronic                |       Owner:
     Type:  defect (bug)               |      Status:  reopened
 Priority:  normal                     |   Milestone:  Future Release
Component:  Toolbar                    |     Version:  3.8
 Severity:  normal                     |  Resolution:
 Keywords:  needs-patch needs-refresh  |     Focuses:
---------------------------------------+-----------------------------

Comment (by juiceboxint):

 If you use the Google "Website Translator" widget anywhere on your page,
 it will force
 `position: relative` on the body, so whether or not you wanted or needed
 to use `body { position: relative }` in your code, you may find that you
 get it anyway.

 The best fix I've found to this is to set the body to `position: relative`
 in your CSS—so it's present on initial page load and doesn't cause any
 flashes when the JS does its thing—then add the following to handle the
 admin bar at screen sizes less than 600px:
 {{{
 @media (max-width: 600px) {
         html #wpadminbar { top: -46px; }
 }
 }}}

 The admin bar still has placement issues when you actually use the
 translation while logged in, because Google adds its own "admin bar" to
 the top of the site—so it won't work as well if people who have accounts
 on the site will need to use the translation feature, but it should work
 in most situations anyway.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/26609#comment:20>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform