Getting Sticky Headers and the WP Admin Bar to Behave

Key Takeaways

WordPress sticky headers and the admin bar can overlap due to their similar positioning. This issue can be resolved by using CSS or Sass to adjust the position of the sticky header, preventing any overlap.
The height of the admin bar can vary depending on the screen size, with a height of 32px on wider screens and 46px on screens narrower than 783px. This difference should be taken into account when adjusting the position of the sticky header.
For theme developers, a reusable mixin can be created using Sass, allowing easy adjustments for any fixed-position item to compensate for the WordPress admin bar. This is particularly useful for mobile menus that are often fixed position.

Putting a site’s logo and main navigation into a sticky header (or a fixed-position header) is a definite trend now. It’s become popular for WordPress themes as well: check out posts like all of these.

In a WordPress site, however, sticky headers run into a problem when the admin bar is visible. Both the admin bar and most sticky headers rely on position: fixed; top: 0;, and are positioned according to the viewport. They end up overlapping. Since the admin bar has a z-index of 99999, it usually covers a good bit of the theme’s sticky header (or if the header wins the z-index war, then it covers the admin bar). Let’s look at how we can use CSS (and Sass) to fix this problem.

broken header with WordPress admin bar

[Quick note: some themes use JavaScript to position sticky elements as the page scrolls. If JavaScript is constantly updating an inline top property, the technique outlined below won’t fix this problem.]

CSS to Move the Header

For the sake of simplicity, we’ll use the class .sticky-header to refer to the element that’s fixed to the top of the page. You should find the correct selector for your theme and use that. We’ll also assume that its top position value is 0. If it’s top is offset to anything else, you’ll need to do the math and tweak the measurements below.

When the admin bar is visible on the front-end, WordPress attaches the class .admin-bar to the <body> of the page. (This is handled by the function body_class(); in header.php most of the time.) That class will let us adjust the top position of our sticky header.

/* This is the existing CSS... */
.sticky-header {
  position: fixed;
  top: 0;
}
/* Here's the new CSS to add... */
.admin-bar .sticky-header {
  top: 32px;
}

That’s pretty manageable, right? The admin bar is 32px tall, so we just move the sticky header down and both are visible. The only problem is, it’s not always quite that simple: the admin bar isn’t always 32px tall. In which case, you’ll need to use CSS.

CSS for Small Screens

On screens narrower than 783px, the admin bar is 46px tall. We’ll need to modify our code to compensate for that:

.admin-bar .sticky-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .sticky-header {
    top: 46px;
  }
}

If you prefer mobile-first CSS (as I do), use this code:

.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}

Now you’ll have the sticky header positioned correctly, no matter how wide the screen is! We’re not quite through, though. If you use Sass to build your theme, we can roll this up into a reusable mixin.

If you’re a theme developer or building a child theme, you already know where to put this CSS in your existing stylesheets. If, on the other hand, you’re working with an existing theme that doesn’t handle its sticky header very well and you simply need to insert this code, you can use a plugin that allows you to insert CSS like WP Add Custom CSS or Simple Custom CSS.

Sass to Move the Header

I’m going to call this mixin admin-sticky-fix(). We’ll take a look at the entire block of code, then look at how each part works.

@mixin admin-sticky-fix( $offset: 0 ) {
  $narrow-offset: 46px;
  $wide-offset: 32px;
  @if $offset != 0 and type-of($offset) == 'number' {
    $narrow-offset: $narrow-offset + $offset;
    $wide-offset: $wide-offset + $offset;
  }
  .admin-bar & {
    top: $narrow-offset;
    @media screen and (min-width: 783px) {
      top: $wide-offset;
    }
  }
}

The mixin takes an optional parameter: $offset. This allows you specify that the element has a top value other than 0. If you don’t specify any offset, the mixin will assume 0 and work with that. If you manually specify an $offset, the @if condition will modify the default admin bar height values to match. Note: Just use an integer: the px unit isn’t needed, but it won’t break things if you do include it.

Our mixin uses Sass nesting to simplify things: the & represents whatever selector this mixin is called inside of. So if you @include it in .sticky-header, you’ll get the output selector .admin-bar .sticky-header. You’ll notice the media query is nested inside the selector as well. Sass automatically moves the @media [etc] back to root and copies the current selector into it. This nesting trick just lets us write a shorter mixin.

Let’s see how this mixin works now:

/* Sass we write */
.sticky-header {
  position: fixed;
  top: 0;
  @include admin-sticky-fix;
}
/* CSS Output */
.sticky-header {
  position: fixed;
  top: 0;
}
.admin-bar .sticky-header {
  top: 46px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header {
    top: 32px;
  }
}

If you need to match an offset value, use the mixin like this:

/*  Sass we write */
.sticky-header-offset {
  position: fixed;
  top: 20px;
  @include admin-sticky-fix(20);
}
/* CSS Output */
.sticky-header-offset {
  position: fixed;
  top: 20px;
}
.admin-bar .sticky-header-offset {
  top: 66px;
}
@media screen and (min-width: 783px) {
  .admin-bar .sticky-header-offset {
    top: 52px;
  }
}

Having a reusable mixin allows us to quickly tweak any fixed-position item to compensate for WordPress’ admin bar. My mobile menus are often fixed position and this lets me easily adjust their top value as well.

Conclusion

By default, sticky headers will clash with the WordPress admin bar, but with these code snippets, the fix is quite manageable. This Sassmeister gist contains the mixin and a few examples of how it works. Where have you seen good implementations of the sticky header trend and how do you style itgrate in your WordPress themes?

Frequently Asked Questions (FAQs) about Sticky Headers and WordPress Admin Bar

Why is my WordPress admin bar overlapping my website content?

This issue often arises due to CSS conflicts. The WordPress admin bar is designed to be fixed at the top of the page. However, if your theme or any plugin has a CSS rule that affects all fixed elements, it can cause the admin bar to overlap with your website content. To resolve this, you can add custom CSS to your theme to adjust the top margin of your content or the position of the admin bar.

How can I make my WordPress admin bar sticky?

By default, the WordPress admin bar is already sticky. However, if it’s not behaving as expected, it might be due to your theme’s CSS rules. You can add custom CSS to make the admin bar sticky. Use the CSS rule position: fixed; for the admin bar to make it stick to the top of the page.

Can I hide the WordPress admin bar?

Yes, you can hide the WordPress admin bar. This can be done by going to your WordPress dashboard, clicking on Users, then Your Profile. Here, you’ll find the Toolbar option. Uncheck the box that says “Show Toolbar when viewing site” and save your changes.

Why is my sticky header hiding under the WordPress admin bar?

This issue is usually caused by the z-index property in your CSS. The z-index property specifies the stack order of an element. An element with a higher z-index will be on top of an element with a lower one. If your sticky header has a lower z-index than the admin bar, it will hide under it. To fix this, increase the z-index of your sticky header.

How can I adjust the height of my WordPress admin bar?

The height of the WordPress admin bar is set by default and it’s not recommended to change it as it can cause display issues. However, if you still want to adjust it, you can do so by adding custom CSS. You can use the CSS rule #wpadminbar { height: 32px; } and adjust the pixel value to your preference.

Can I customize the WordPress admin bar?

Yes, you can customize the WordPress admin bar. This can be done by using plugins or by adding custom code to your functions.php file. You can add or remove items, change the appearance, and more.

Why is my WordPress admin bar not showing?

If your WordPress admin bar is not showing, it could be due to several reasons. It could be a plugin conflict, a problem with your theme, or the Toolbar option in your profile settings is unchecked. Check these areas to troubleshoot the issue.

Can I move the WordPress admin bar to the bottom of the page?

Yes, you can move the WordPress admin bar to the bottom of the page by adding custom CSS. Use the CSS rule #wpadminbar { position: fixed; bottom: 0; top: auto; } to move it to the bottom.

Is it possible to make the WordPress admin bar transparent?

Yes, you can make the WordPress admin bar transparent by adding custom CSS. Use the CSS rule #wpadminbar { background-color: transparent; } to make it transparent.

Can I add my own links to the WordPress admin bar?

Yes, you can add your own links to the WordPress admin bar. This can be done by using a plugin or by adding custom code to your functions.php file. You can add links to your most used pages, external sites, or any other useful resources.