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.

Comments

  1. User Avatar
    Wordpress HATER
    Permalink to comment#

    i really hate wordpress

  2. User Avatar
    Balaji
    Permalink to comment#

    Thank you :)

  3. User Avatar
    Goran
    Permalink to comment#

    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. User Avatar
    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. User Avatar
    Tali
    Permalink to comment#

    You just solved one of my pet peeves! Thanks

  6. User Avatar
    charles
    Permalink to comment#

    this did not work for me

  7. User Avatar
    vvvoid
    Permalink to comment#

    Doesn’t work in latest WordPress.

    • User Avatar
      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. :)

    • User Avatar
      Ryu
      Permalink to comment#

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

  8. User Avatar
    Theodore M. Wallerstedt II
    Permalink to comment#

    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. User Avatar
    Luka Savic
    Permalink to comment#

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

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

    ..and that’s all :)

  11. User Avatar
    Caroline
    Permalink to comment#

    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. User Avatar
    Rebekkah Hilgraves
    Permalink to comment#

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

  13. User Avatar
    Marc Heatley
    Permalink to comment#

    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.

  14. User Avatar
    Mike
    Permalink to comment#

    Solution for me was add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) ); in the functions file

    • User Avatar
      Brown

      Thank you Mike. Your code took the admin bar’s empty layout that appears very top of the page of my site…

  15. User Avatar
    ciar4n
    Permalink to comment#

    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

    • User Avatar
      James Clark
      Permalink to comment#

      Ciar4n’s solution worked for me and my sticky banner. So simple – thank you!

  16. User Avatar
    Wiliam
    Permalink to comment#

    Worked for me in the ‘admin_bar_init’ action.

  17. User Avatar
    Angela
    Permalink to comment#

    Mike’s solution worked for me on 4.2.2. Thank you!

  18. User Avatar
    Ryan
    Permalink to comment#

    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.

    <?php
    function _admin_bar_bump_cb_mod() { ?>
    <style type="text/css" media="screen">
        html { margin-top: 32px !important; }
        * html body { margin-top: 32px !important; }
        @media screen and ( max-width: 782px ) {
            html { margin-top: 0px !important; }
            * body { padding-top: 46px !important; }
        }
    </style>
    <?php
    }
    function my_filter_head() {
        remove_action('wp_head', '_admin_bar_bump_cb');
        add_action('wp_head', '_admin_bar_bump_cb_mod');
    }
    add_action('get_header', 'my_filter_head');
    ?>
    
    • User Avatar
      Ryan
      Permalink to comment#

      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:

      //de-register _admin_bar_bump_cb default behavior
      function my_filter_head() {
        remove_action('wp_head', '_admin_bar_bump_cb');   
      }
      add_action('get_header', 'my_filter_head');
      

      Add to style.css (or theme style) file:

      body.admin-bar {
          padding-top:32px;   
      }
      @media screen and ( max-width: 782px ) {
          body.admin-bar {
              padding-top:32px;   
          }
      }
      
  19. User Avatar
    Munnie
    Permalink to comment#

    Works for me. Thanks! I’ve been spending time to search the css code but this just solve my problem in a minute!

  20. User Avatar
    Steve
    Permalink to comment#

    Ryan thank you! Your solution works perfectly!

  21. User Avatar
    Santiago Cerro
    Permalink to comment#

    This works for me, you only need to give the lowest priority to the action.

    //Remove Admin Bar Html
    
    if (!function_exists("loc_ca_remove_html_margin_admin_bar")) {
        function loc_ca_remove_html_margin_admin_bar() {
            if(is_admin_bar_showing()) {
                ?>
               <style type="text/css" media="screen">
                   html { margin-top: 0px !important; }
                   * html body { margin-top: 0px !important; }
               </style>
                <?php
            }
        }
    }
    add_action ("wp_head", "loc_ca_remove_html_margin_admin_bar", 999);
    
  22. User Avatar
    Alex C
    Permalink to comment#

    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

  23. User Avatar
    Alex C
    Permalink to comment#

    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)

     <header <?php 
      // Fix menu overlap bug..
      if ( is_admin_bar_showing() ) echo 'id="adminbarfix"'; 
    ?>>
    

    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

    <style>
    #adminbarfix {top:32px;}
    </style>
    

    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

  24. User Avatar
    BobDi

    Thanks Ryan! Saved my day. Your second proposition works perfectly.

  25. User Avatar
    adir
    Permalink to comment#

    The correct answer for current wordpress version 4.6.1

    Remove the 28px Push Down from the Admin Bar

  26. User Avatar
    Matt
    Permalink to comment#

    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;
    }

  27. User Avatar
    Steve

    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>'; ?>

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag