When logged in, the admin bar adds the following to my page <head> section:

<style media="screen" type="text/css">
    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }

Now, I can remove this by disabling the admin bar

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

or removing it completely

/* Remove admin bar */
remove_action('init', 'wp_admin_bar_init');

I would like to keep the admin bar in the admin interface and only remove the CSS from front end.

I already use CSS reset where I set margin: 0px, but the admin-bar styling overrides this.

So how can I remove the styling from front end?

PS. I know I can disable the admin bar per user, but that's not what I want.

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' );
  • 1
    Ah :) I was testing for admin when I tried something similar. Forgot about the is_blog_admin. Thanks :) – Steven Oct 5 '11 at 9:08
  • which file does this go in...I'm pretty new to WP... – user14432 Oct 3 '12 at 13:46
  • @HiroProtagonist it can be defined in any plugin or in functions.php of your theme. – Maxim Krizhanovsky Oct 3 '12 at 14:17
  • This doesn't remove the CSS margin-top: 28px !important from the front-end though? – jjeaton May 13 '13 at 23:18
  • 2
    You can shorten it a bit: add_filter( 'show_admin_bar', function (){ return is_blog_admin() }); – MiCc83 Apr 26 '16 at 12:19

f you want to remove the admin bar (toolbar) AND the bump CSS from your page, use this:

function wpse_99333_hide_admin_bar_from_front_end(){
  if ( is_blog_admin() ) {
    return true;
  remove_action( 'wp_head', '_admin_bar_bump_cb' );
  return false;
add_filter( 'show_admin_bar', 'wpse_99333_hide_admin_bar_from_front_end' );

The _admin_bar_bump_cb function is the one that inserts the CSS (located in wp-includes/admin-bar.php)


I would do something like this :

Remove admin bar / CSS in head / body class


or if you just want to : Remove html margin-top CSS in <head>

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

Tested : Version 4.7.3


I recently had to do this, I just wanted wordpress's default inline css styles (for the admin bar) removed, but I did want the admin bar to remain. I was displaying the admin bar at the bottom of the page, not the top.

Here is what got rid of injecting the styles from the _admin_bar_bump_cb function for me. I added the following to my functions.php

// remove wordpress trying to style the admin bar with inline css
function hide_admin_bar_from_front_end(){
  remove_action( 'wp_head', '_admin_bar_bump_cb' );
  return true;
add_filter( 'show_admin_bar', 'hide_admin_bar_from_front_end' );

protected by Pieter Goosen Oct 16 '15 at 9:19

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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