Menu
I'm creating a web site that fits to the screen with Wordpress.
When the site owner logs in, the admin bar will appear but it adds the following style:
html{ margin-top: 28px !important; }
This causes a vertical scroll bar to appear. Is there any way to fix this using just CSS?
Someone had a similar issue but he got no answer.
My relevant html structure:
<html>
<body>
<div id="page">
<div class="site-main" id="main">
<div class="content-area" id="primary">
<div role="main" class="site-content" id="content">
</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->
</div><!-- #main .site-main -->
</div><!-- #page -->
<div id="wpadminbar">
</div>
</body>
</html>
And relevant CSS:
html, body, #page {
width: 100%;
height: 100%;
min-width: 350px;
margin: 0;
padding: 0;
}
#main {
height: 100%;
}
#primary {
float: right;
width: 100%;
margin-left: -200px;
height: 100%;
}
#content {
margin-left: 250px;
height: 100%;
}
For the admin bar:
#wpadminbar {
height: 28px;
left: 0;
min-width: 600px;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
I've tried using (negative) margins and paddings, also setting the admin bar's position to absolute instead of fixed but no luck.
297
Look into wordpress/wp-includes/class-wp-admin-bar.php at the beginning, and you will find this. Watch closely the comments for the actual answer:
if ( current_theme_supports( 'admin-bar' ) ) {
/**
* To remove the default padding styles
* from WordPress for the Toolbar,
* use the following code:
* add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
*/
$admin_bar_args = get_theme_support( 'admin-bar' );
$header_callback = $admin_bar_args[0]['callback'];
}
if ( empty($header_callback) )
$header_callback = '_admin_bar_bump_cb';
add_action('wp_head', $header_callback);
wordpress/wp-includes/admin-bar.php contains the default implementation of _admin_bar_bump_cb:
/**
* Default admin bar callback.
*
* @since 3.1.0
*/
function _admin_bar_bump_cb() { ?>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
<?php
}
In your php code (on the page where you DON'T want the admin bar to appear), just add the following:
add_filter('show_admin_bar', '__return_false');
See here: http://davidwalsh.name/hide-admin-bar-wordpress
31
2022 here.
I recently noticed that WordPress has been setting a relevant CSS variable on the front-end when logged in as an admin:
html {
--wp-admin--admin-bar--height: 32px;
scroll-padding-top: var(--wp-admin--admin-bar--height);
}
@media screen and (max-width: 782px)
html {
--wp-admin--admin-bar--height: 46px;
}
}
This is very convenient, as it allows you to do things like this (making a hero element as high as the viewport, but subtracting the height of the admin bar):
.hero {
min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}
There is a slight issue with that, though: If you’re not signed in as an admin, the CSS variable is not set, and this can break things like calculations.
This can be fixed by checking for a body class that WordPress also sets:
.hero {
min-height: 100vh;
}
body.admin-bar .hero {
min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}
…but this can get messy rather quickly, so I came up with a little one-size-fits-all solution that I’ll probably be using a lot:
body:not(.admin-bar) {
--wp-admin--admin-bar--height: 0px;
}
This allows me to do things like this, and not having to worry about whether the user is logged in or not:
.site-header {
top: var(--wp-admin--admin-bar--height);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
