[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:  closed
 Priority:  normal                     |   Milestone:
Component:  Toolbar                    |     Version:  3.8
 Severity:  normal                     |  Resolution:  wontfix
 Keywords:  needs-patch needs-refresh  |     Focuses:
---------------------------------------+----------------------

Comment (by rogerlos):

 This can be fixed by using the `::before` pseudo element on the body tag,
 rather than setting a margin on html. If the body is relatively positioned
 or not becomes irrelevant at that point.

 Here's a JS snippet which does this, but it would be worth considering
 changing the WP stylesheet to reflect this. (You'd want to de-bounce the
 resize call if using the JS below, or maybe use a mutation observer on the
 admin bar instead, in production.)

 You could also potentially use your theme stylesheet to attempt to
 override the inline sheet added by WP, and use media queries to match the
 WP break points.

 {{{
 jQuery('document').ready( function ($) {

     // event listener, and run once when this script loads
     window.addEventListener( 'resize', fixadminbar );
     fixadminbar();

     function fixadminbar() {

         // get adminbar height, 'css' will be true if bar is present,
 false if not
         var ah = $( '#wpadminbar' ).outerHeight(),
             css = typeof( ah ) !== 'undefined',
             $head = $('head');

         // if 'css' is true, change value to CSS rules
         css = css
             ? 'html{margin-top:initial !important}'
                 + 'body::before{content:"";height:' + ah +
 'px;display:block}'
             : css;

         // if this has been written before, remove old version
         $head.find('#wpadfx').remove();

         // append new if bar is present
         if ( css )
             $head.append('<style id="wpadfx">' + css + '</style>');
     }
 });
 }}}

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