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.

<?php
// Admin Bar
add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
view raw functions.php hosted with ❤ by GitHub
.admin-bar .site-container {
padding-top: 32px;
}
@media only screen and (max-width: 782px) {
.admin-bar .site-container {
padding-top: 46px;
}
}
view raw style.css hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

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

Let's Talk