Grow your CSS skills. Land your dream job.

Last updated on:

Remove the 28px Push Down from the Admin Bar

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.

Reference URL

Comments

  1. Wordpress HATER
    Permalink to comment#

    i really hate wordpress

  2. Thank you :)

  3. 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?

  4. katehudson
    Permalink to comment#

    Coupled with this code, you could show the admin bar for admin’s and hide it for anyone else(subscribers,etc.)

    if(current_user_can('manage_options') == 1){
        show_admin_bar(true);
    }else{
        show_admin_bar(false);
    }
    
  5. Tali
    Permalink to comment#

    You just solved one of my pet peeves! Thanks

  6. Permalink to comment#

    this did not work for me

  7. vvvoid
    Permalink to comment#

    Doesn’t work in latest WordPress.

    • Ryu
      Permalink to comment#

      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. :)

    • Ryu
      Permalink to comment#

      beetween the head-Tags in your header of your theme.

  8. 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?

  9. Here is the version for WP 3.8.x and up.

    add_theme_support( 'admin-bar', array( 'callback' =&gt; '__return_false' ) );
    
  10. Permalink to comment#
    html[lang] {
      margin-top: 0 !important;
    }
    

    ..and that’s all :)

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".