Support » Alpha/Beta/RC » Admin bar CSS

  • Resolved esmi


    The Admin bar adds the following CSS to all front facing pages:

    body {
        padding-top: 28px !important;

    This can severely disrupt any absolutely positioned elements on the page. A better approach might be to use:

    body {
        position: relative !important;
        top: 28px !important;

    which (in theory) should preserve any existing positioning.

Viewing 15 replies - 1 through 15 (of 28 total)
  • Moderator Dominik Schilling


    WordPress Core Developer

    If you have problems with it, you can define your own callback or remove it with
    add_theme_support( 'admin-bar', array( 'callback' => '__return_false') );

    Thread Starter esmi


    Thanks. I hadn’t realised that the admin bar was being added via add_theme_support. I’ll dig a little deeper into this. However, I still think that the default CSS needs looking at.

    The admin bar isn’t added by theme support — it’s considered supported by default. The code ocean90 posted is designed to allow you to offer your own callback for rendering the CSS for the admin bar, or in the case of __return_false, noop and have no new CSS.

    We actually spent quite a while going over the CSS. Review our work at

    I’m rewriting a themes code (theme runs on thousands of sites) for a new release and have it working perfectly in WordPress 3.0.4 and below, wise to test on the beta release and hit a snag.

    The padding was breaking my themes layout, wasn’t able to get it to work with WordPress 3.1 and earlier version of WordPress. One div was thrown off.

    I tested Esmi’s code with my theme and it looks like it resolves the issue.

    I have a div positioned with this CSS

    .navbar {
    width: 990px;
    position: absolute;
    top: 115px;

    this is not unusual theme code.

    With the current WordPress 3.1 beta code it’s obviously not taking the 28px padding into account, so when the admin bar is present it’s 28px to high. With Esmi’s CSS code (as a replacement for the Admin bars CSS) it’s where it should be.

    I didn’t want to force theme users to turn the admin menu off by default.

    I’ve fixed the issue by adding a wrapper div to the whole theme and giving it position:relative; which means the absolute element that was being positioned absolute to the body is now positioned absolute to the wrapper div which is padded down in WordPress 3.1 and not in WordPress 3.0 and below. Really shouldn’t have to add this fix when a simple bit of CSS on the admin bar would have avoided it for my theme and presumably lots like it.


    Playing with the admin bar activated and not activated / logged in and not logged in, I noticed that when activated but not logged in it will take on padding other than 28px from the theme if defined.

    For instance, if the theme padding is set to body {padding-top: 80px;} it will show up as 28px when the user is logged in and the admin bar is displayed, and 80px when the user is not logged in and the admin bar is not displayed.

    Would it be a good idea to make the forced padding to apply (to 0px rather than 28px) even when the user is not logged in? That way theme authors will use margin to achieve what they want and not make the experience different for the user depending on their login status.

    We’re changing what’s in core to another solution we really like.

    How can we turn off the admin bar? It is covering my Buddypress menu. Thank you!

    How can we turn off the admin bar? It is covering my Buddypress menu. Thank you!

    Same here?

    Is there not an option to simply turn it off.


    open up your theme functions.php and add the following:

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

    /* Remove the Admin Bar preference in user profile */
    remove_action( ‘personal_options’, ‘_admin_bar_preferences’ );

    Moderator Samuel Wood (Otto)

    (@otto42) Admin

    Or just go to Users->Your Profile and click the checkboxes. No need for extreme code editing when the thing is optional to begin with.

    Buddypress is being updated as we speak to accomodate this

    I’ve got one theme where the admin bar background appears but none of the menu items. I found one theme element (the nav bar) with a z-index of 99999. Thinking this conflicted with the z-index of the admin bar, I changed the z-index of the nav bar to 9999. That didn’t help. Any ideas?

    HI !!

    PLEASE HELP !!!!!

    Ive just founded information about turn it off, but no to style it. Its suposed you can turn it off with

    addfilter(‘show_admin_bar’, ‘__regurn_false’);

    but… Aren’t filters a way to manipulate the html content??? How can I style or add some html to the ADMIN BAR???


    Moderator Ipstenu (Mika Epstein)


    🏳️‍🌈 Plugin Review Team Rep

    Add HTML:

    Customize is just CSS. View the source of your page with the admin bar and add your changes to your theme’s CSS 🙂

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘Admin bar CSS’ is closed to new replies.