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;
  }
  
}