Remove WordPress Admin Bar CSS

By  on  

A version or two back, WordPress decided to add a toolbar for logged in users on the display side that's about the site's theme.  I get why they did it but it's an annoyance to me -- I don't care to see it.  To accomplish this task, WordPress injects the following into every page:

<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<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: 46px !important; }
		* html body { margin-top: 46px !important; }
	}
</style>

Bleh.  You can remove this CSS and the admin bar using the following code which should be placed with your functions.php file:

add_action('get_header', 'remove_admin_login_header');
function remove_admin_login_header() {
	remove_action('wp_head', '_admin_bar_bump_cb');
}

Use it.  You're welcome.

Recent Features

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

Discussion

  1. useful, but why you don’t just uncheck the “Show Toolbar when viewing site” option in your User Profile?

    • With this you can apply a “blanket” implementation for all users — you wouldn’t need to tell them to do so.

    • Right, I’m agree.
      Thank you David

  2. You can also do this with show_admin_bar(false); in functions.php… You’re welcome ;)

    • Adam

      the original tip didn’t work but this one did, thanks!

  3. The easiest and most recommendable way would be this:

    add_filter( 'show_admin_bar', '__return_false' );
    

    You should always use filters. And this is the most accurate one.

    • Husni

      This doesn’t remove the css. It removes the admin bar.

    • Thanks Pascal Birchler!

  4. I could have used this snippet a while back. Thanks!

    Not everyone using WordPress understands PHP, so some people might feel more comfortable using CSS.

    html {
        margin-top: 0!important;
    }
    
    #wpadminbar {
        display: none;
    }
    
    • This css turns a problem for the higher levels of editor, admin profile, that needs the admin bar on the top.

  5. Thank you so much! The css html{margin-top: 0 !important} didn’t work, but your function works perfectly.

    I have custom home page and blog on other page. I had 32px margin-top in html only on home page, but this works perfectly :)

  6. from the class-wp-admin-bar.php comments:

    To remove the default padding styles from WordPress for the Toolbar, use the following code:

    add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
    
    • Thank you! This was just what I was looking to get rid. :)

    • I prefer this approach, Thanks TJ.

  7. I’m glad I’m not the only one who goes nuts from this toolbar – it interferes with design, it’s just mind boggling how did they come up with it… I prefer your solution precisely because it removes it from all users at once. Thanks!

  8. adam

    I know this topic is old but add_action thingy gets me an error… is it because I’m working in localhost?

  9. Thanks! worked like a charm :) was looking for the source of this code for hours!

  10. Thanks for this. This issue came up for me with a menu that slides in from the right side. Every time I opened the menu that 32px would be added to the top and create a white space. This fixed it instantly.

  11. Thor

    Works!
    I wanted to KEEP the admin bar, but it conflicted with my off-screen navigation in my theme, so the removal of CSS ONLY was needed since it was impossible for me to override the css specificity (HTML { margin-top:32px !important; })

    Several comments above is for REMOVING admin bar which was not the objective of the post.

  12. JP

    I hate the margin-top issue it would break my layout especially if I was using Bootstrap navba-fixed-top. Here is a simple css solution if you want to keep the WP admin bar and avoid overlapping. Please note that the height of the WP admin bar is taller when in mobile view.

    .admin-bar > .navbar-fixed-top {
      top: 32px !important;
      }
    
    @media screen and (max-width: 767px) {
      .admin-bar > .navbar-fixed-top {
      top: 46px !important;
      }
    }
    
    • DeadSea

      This is perfect JP! Thank you!

  13. Suzy

    Thank you for this function! That whitespace was driving me crazy!

  14. Jo

    I not only see the white space still (after using the fix above) but I can also see a sad face there too, not when logged into admin but when logged out anyone know about this?? The fix only fixed when logged in but when logged out, its back!

  15. Toby

    Love this solution, when working with absolute elements (sidebar that slides out) this is needed.

    Works flawlessly. You can even check if user is loggged in at this point (get_header).

    Thanks a lot.

  16. Ping Ram

    I really wish wp devs would allow the output to be filtered, especially css rules that are cancelled out with an asterisk and others that forced !important.

    I took another approach. This hides the admin bar except the 32px wp icon in the top-left corner and on hover slides the full admin bar down into view leaving the entire site unobstructed except the top-left 32px.

    1 – Set wp icon fixed w/ same menu bar bg-color + fix 2nd child position:

    li#wp-admin-bar-wp-logo {
        background-color: #1d2327 !important;
        position: fixed !important;
        top: 0px;
    }
    ul#wp-admin-bar-root-default > li:nth-child(2) {
        margin-left: 32px !important;
    }
    

    2 – pull entire bar up (except wp icon), set nice transition on hover:

    div#wpadminbar {
        top: -32px;
        transition: top 300ms ease-in-out;
    }
    div#wpadminbar:hover {
        top: 0px;
    }
    

    3 – use negative margin on body element bring content to top of viewport:

    body.admin-bar {
        position: relative;
        top: -32px;
    }
    

    4 – Set media queries for 32/46px transition:

    @media (max-width: 782px) {
        body.admin-bar,
        div#wpadminbar {
            top: -46px;
        }
        body.admin-bar #hero_down {
            margin-top: 46px;
        }
        ul#wp-admin-bar-root-default > li:nth-child(2) {
            margin-left: 46px !important;
        }
    }
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!