whenever admin or any other user logs in a top bar menu ads up. Now I made login for everybody, so I do not want this bar.

First I added display:none to admin-bar.css, but the main problem is that wordpress is still adding a white line on the top with:

html {
    margin-top: 28px !important;

How to remove this as this is causing some design flaws.

9 Answers 9



Has an article about it.

But basically

/* Disable the Admin Bar. */
add_filter( 'show_admin_bar', '__return_false' );

or also

remove_action('init', 'wp_admin_bar_init');

I believe in your functions.php will disable it. Probably a better way than just hiding it thriough css

THe reason you still get the gap with the menu hidden is because WP adds this css as well

html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }

So a margin is added up top.... you could negate that css in yours, but just disabling the bar is probably better if that's what you want to do


To remove the top margin left by the admin bar, it's not enough just to set show_admin_bar to false. You also need to remove the admin bar bump callback:

remove_action( 'wp_head', '_admin_bar_bump_cb' );

Add this function in functions.php of your theme

function hide_admin_bar_from_front_end(){
  if (is_blog_admin()) {
    return true;
  return false;
add_filter( 'show_admin_bar', 'hide_admin_bar_from_front_end' );

If you're talking about the top bar that shows up with quicklinks for the admin, you can also disable it per user when you setup their profiles.

It's just a checkbox in the admin under the profile.


The best way I've found to remove that white space (it's not caused by the admin bar) is to search out this CSS in style.css:

#page {
    margin: 2em auto;
    max-width: 1000px;

and switch the 2em to 0em or some variation of the same. That will remove the white space.


Disable the WordPress Admin Bar Using CSS

You only have to copy and paste the CSS code below in Appearance > Customize > Additional CSS, or your style.css file.

The CSS code to disable the toolbar is:

#wpadminbar { display:none !important;}

Only valid php solution:

1) For Front-End:

show_admin_bar(false);          //same as:  add_filter( 'show_admin_bar', '__return_false');  

2) For Back-End (tricky solution per hook):

if ($from_dashboard_too)
    remove_action( 'in_admin_header', 'wp_admin_bar_render', 0 );
    //disables top margin
    add_filter( 'admin_title', function(){ $GLOBALS['wp_query']->is_embed=true;  add_action('admin_xml_ns', function(){ $GLOBALS['wp_query']->is_embed=false; } ); } );

I don't have access to the functions.php and I was trying to solve the same issue just via frontend with the Enfold theme I was using. Like the previous answer from @DavidTaubmann, I used the same CSS edit, but that will still leave a 28px blank space at the top of the page, so here is the solution that worked for me.

From your-wordpress-site.com/wp-admin dashboard, go down to

  • Appearance > Customize
  • Click Additional CSS.

Copy and paste this:

#wpadminbar { display:none !important;}
html { margin-top: 0px !important; }
html body { margin-top: 0px !important; }
  • Click Publish!

For other helpful solutions you can refer to:


To remove the top admin bar you need to go to Users in the left Menu, then Edit the user and then disable the Show toolbar when viewing website checkbox. Save. Done. Do this to all users.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.