For your functions.php file:
add_action('get_header', 'my_filter_head');
function my_filter_head() {
remove_action('wp_head', '_admin_bar_bump_cb');
}By default, if you are seeing the admin bar as a logged in WordPress user, CSS like this will be output in your head (output in the wp_head() function):
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>This is normally a good thing, as it doesn’t cover parts of your site then with its fixed-position-ness. But it can also be weird if you use absolute positioning for things. As they will be different depending on if the bar is there or not. Using the code above to remove the bump CSS will make the bar cover the top bit of your site, but at least the positioning will be consistent.
i really hate wordpress
Thank you :)
Hey
Does this mean that the admin bar will still be shown for logged in users, but it will overlay the first 28px instead of pushing them down?
Coupled with this code, you could show the admin bar for admin’s and hide it for anyone else(subscribers,etc.)
You just solved one of my pet peeves! Thanks
this did not work for me
Doesn’t work in latest WordPress.
Try add this beetween and in your theme.
html { margin-top: 0px !important; }
* html body { margin-top: 0px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 0px !important; }
* html body { margin-top: 0px !important; }
}
It works for me. :)
beetween the head-Tags in your header of your theme.
Do we have a 2014 version of how to stop the push down? I don’t want to use Ryu’s solution, because that means there is duplicate conflicting code, I am sure this is not a W3C kinda solution – and HAVE YOU CROSS BROWSER CHECKED THIS?? Ryu, I am lookin at you. Love your work Chris – any ideas on a function that would remove the push down in 3.8.1 ?? I am using Roots so I am trying to stay as concise as possible ya know?
Here is the version for WP 3.8.x and up.
..and that’s all :)
So true :D
Thank you for this one
Hero :)
thanks a lot!! couldnt solve it, but with the php snippet in the functions php it worked perfectly (and with wp 4.0)! great
Perhaps I’m being simplistic, but you can also disable the admin bar via your user profile when you’re logged in.
I realise I’m pretty late to this party, but it’s still a real pain. I tend to wrap all my markup in a .wrapper that can be
position:relative;which takes care of all the absolute positioned stuff, then I have a SASS mixin that can help wherever you useposition:fixedor whatnotHope this helps someone. I created a Gist too for easy reuse.
Solution for me was
add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );in the functions fileThank you Mike. Your code took the admin bar’s empty layout that appears very top of the page of my site…
I stand to be corrected here but is there not a class added to the body tag for this by WordPress? For example if you have a sticky header been covered by the admin panel then just use the following CSS…
…
.my-sticky-header {
top: 0px;
}
.admin-bar .my-sticky-header {
top: 32px;
}
…
If admin-bar is true then your sticky header will be pushed down 32px.
Ciarán
Ciar4n’s solution worked for me and my sticky banner. So simple – thank you!
This worked for me, thank you
Great! This saved us a lot of time!
Cheers
Worked for me in the ‘admin_bar_init’ action.
Mike’s solution worked for me on 4.2.2. Thank you!
I am running bootstrap in a theme with sticky header/footer and had this problem. I built a hook to add to my functions.php file. It works by removing margin from html and adding top-padding to body under the media query section. I haven’t tested outside of bootstrap.
I got so excited about this solution that I forgot to test it without the admin bar. Riding off of the padding fix. Disregard the above as it leaves a space at the top when logged out. Here is my new soltution:
Add to functions.php:
Add to style.css (or theme style) file:
Works for me. Thanks! I’ve been spending time to search the css code but this just solve my problem in a minute!
Ryan thank you! Your solution works perfectly!
This works for me, you only need to give the lowest priority to the action.
Here is my quick fix. for 4.4.2
So in my case, I have a fixed header so content will scroll up under it. and of course the Admin Bar is a fixed header and that bar overlaps on top of my header container. So I added a simple PHP code to display an ID if you are logged in. Then use top:32px; to push down the header container if the admin bar is showing. Here is the code. (note this PHP code can be placed anywhere, not just Header tags)
<
header >
so when not logged in, you see
<
header >
when logged in, you see
<
header id=”adminbarfix”>
Then simply add this CSS to either above the tag like this
#adminbarfix {top:32px;}
or in your styles.css sheet like this
#adminbarfix {top:32px;}
Of course you can use classes instead of ID and well. You can use this code for other cool things when you are logged in :) Hope this helps
Please delete my last comment as I didn’t write it out correctly
Here is my quick fix. for 4.4.2
So in my case, I have a fixed header so content will scroll up under it. and of course the Admin Bar is a fixed header and that bar overlaps on top of my header container. So I added a simple PHP code to display an ID if you are logged in. Then use top:32px; to push down the header container if the admin bar is showing. Here is the code. (note this PHP code can be placed anywhere, not just Header tags)
so when not logged in, you see
when logged in, you see
Then simply add this CSS to either above the tag like this
or in your styles.css sheet like this
Of course you can use classes instead of ID and well. You can use this code for other cool things when you are logged in :) Hope this helps
Thanks Ryan! Saved my day. Your second proposition works perfectly.
The correct answer for current wordpress version 4.6.1
You could simply add a CSS selector to the HTML element. I tested in FireFox only. Add this to your styles.css in your theme:
html:first-of-type {margin-top:0 !important;}#wpadminbar {margin-top:-32px;}
If you want to turn the admin bar into a slide down (leaves a 1 px line to hover over and drop the admin bar) for say when you are developing themes and plugins:
html:first-of-type {margin-top:0 !important;}#wpadminbar {margin-top:-31px;}
#wpadminbar:hover {margin-top: 0;}
#wpadminbar {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
You could just add this after your opening body tag (in header.php) to push everything down, ensuring nothing gets covered by the admin bar.
<?php if ( is_admin_bar_showing() ) echo '<style>header {position:relative;top:0;}</style>'; ?>
There’s a much simpler solution that will hide the admin bar and get rid of the CSS in newer versions of WordPress (5.2.1 as of writing). Here it is, put this in
functions.phpof your theme:This stopped working for me (somewhere around WordPress 5, maybe?) and I found while searching for
_admin_bar_bump_cbthat the source code for the WP Admin Bar — https://developer.wordpress.org/reference/classes/wp_admin_bar/ — has an otherwise undocumented note:Hope that saves you all some searching.
I went with adjusting the css based on whether the admin-bar was there or not by sticking this in the header…
#topbar{ top: px; }
html { margin-top: px !important;}
* html body { margin-top: px !important;}
I needed to be able to see that top bar but I still wanted to use the admin bar when I wanted.