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

  11. thanks a lot!! couldnt solve it, but with the php snippet in the functions php it worked perfectly (and with wp 4.0)! great

  12. Perhaps I’m being simplistic, but you can also disable the admin bar via your user profile when you’re logged in.

  13. 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 use position:fixed or whatnot

    @mixin wp-admin-bump{
      .admin-bar & {
          margin-top: 46px;
          @media screen and (min-width: 782px){
            margin-top: 32px;
          }
        }
    }
    

    Hope this helps someone. I created a Gist too for easy reuse.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

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