Remove the 28px Push Down from the Admin Bar

Avatar of Chris Coyier
Chris Coyier on

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.