Handle Admin Bar Styling in Theme

WordPress injects admin bar related CSS into all pages when the admin bar is present, pushing the site down so the admin bar appears at the top. Because of this, it can be difficult to make a fixed header work with the admin bar.

The following code disables the admin bar CSS (just the part that pushes the site down). You can then provide your own styling in the theme.

functions.php

// Admin Bar
add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );

style.css

.admin-bar .site-container {
  padding-top: 32px;
}

@media only screen and (max-width: 782px) {
  
  .admin-bar .site-container {
    padding-top: 46px;
  }
  
}

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk