WordPress Admin Bar Break Points

If you’re building a responsive site with a fixed header, you may have run into troubles with content below the header fitting correctly, depending on what screen size your viewing at here’s a quick rundown of the breakpoints that WordPress currently (4.1.2) uses:

1. 0 – 600px

Position: Absolute, 46px height. This bar scrolls up as you swipe/scroll. Content below need to be adjusted down. Since WordPress uses a max-width media query, this style also takes on, but overrides the following two break points.

Here’s their CSS:

media screen and (max-width: 600px)
#wpadminbar {
  position: absolute;
}

2. 601 – 783px

Position: Fixed; 46px height. The bar now becomes fixed to the top of the window, at a height of 46px. You will also need to adjust content below, but if you’re using a min-width, styles from the previous break point should cover you. Again, as WP used max-width, the following point will be included in this width range.

Here’s their CSS:

@media screen and (max-width: 782px)
html #wpadminbar {
  height: 46px;
  min-width: 300px;
}

3. 784px an up

Position: Fixed; 32px height. This is the main desktop version of the admin bar. Fixed again, but at 32px. You’ll most likely need to adjust content below accordingly. Here’s their styles:

#wpadminbar {
  direction: ltr;
  color: #CCC;
  font: 400 13px/32px "Open Sans",sans-serif;
  height: 32px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 600px;
  z-index: 99999;
  background: #222;
}

How to target these break points

When a user is logged in and the admin bar is present, you’ll find a body class that you can hook if your theme is coded correctly. I’d bet it works even with a crappy theme though…

Here’s a code example, written in Sass on how I go about it:

.site-header {
    width: 100%;
    padding: 0;

    .admin-bar & {
        top: 46px;

        @include mq(783) {
            top: 32px;
        }

    }
    @include mq(600) {
        position: fixed;
        top: 0;
    }
}

I use a Sass mixin to compile the media queries into a min-width. The above code will output this:

.site-header {
  width: 100%;
  padding: 0;
}

.admin-bar .site-header {
  top: 46px;
}

@media (min-width: 48.9375em) {
  .admin-bar .site-header {
    top: 32px;
  }
}

@media (min-width: 37.5em) {
  .site-header {
    position: fixed;
    top: 0;
  }
}

This code will keep my .site-header positioned normally until 37.5em, or 600px, at which it will turn fixed and rest at the top, unless a user is logged in, where it will bump down 46px. Then bump back up to 32px at 48.9375em or 783px. If you’re wondering, I’m calculating em’s at a base of 16px.

Also, don’t forget to set styles for non-logged in users!