Making Fixed Nav Work with the WordPress Admin Bar

A fixed header is a good way to maintain a prominent position for the branding and navigation elements on your website. A normal inline header disappears once a visitor begins scrolling to see content lower on the page. A fixed header remains pinned to the top of the browser window so that it always remains accessible no matter where the visitor is on the page.

This approach works best with a low profile header that takes up a minimum of vertical space — taller headers already monopolize space on the default page view, so pinning them in place may negatively affect overall usability.

However, a minor problem arises when using a fixed header on a WordPress site. When logged in as an admin, the WordPress admin bar itself is also pinned to the top of the browser window. This leads to the admin bar overlapping the website header, in some cases obscuring part or all of the branding and navigation. This is particularly the case when the website header is already quite narrow, in some cases making normal site navigation impossible because the WordPress admin bar is given a z-index that always puts it on top.

How to Display Fixed Nav Below the WordPress Admin Bar

Thankfully, there is a simple solution to the issue.

When logged in as an Administrator, the body tag is given a class of ‘admin-bar’ which you can use to alter the style of your header to account for the presence of the admin bar. Modify your header when this class is present to be positioned enough pixels from the top by to account for the admin bar.

Here’s what works for this site:

body.admin-bar .header {
      position:fixed;
      top: 28px;
      z-index: 1000;
      height: 40px;
}

The z-index isn’t strictly necessary, but just in case it ensures that the website navigation bar will display on top of the WP admin bar (or anything else). Personally, I’d rather be able to navigate the site normally and use the full WP admin interface anyway.