[wp-trac] [WordPress Trac] #26609: Admin Bar pushed down at screens of 600px width and lower on the frontside
WordPress Trac
noreply at wordpress.org
Fri Jun 9 05:39:34 UTC 2017
#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
More information about the wp-trac
mailing list