WordPress Admin Bar break points

From Absolute to Fixed and 46 to 32

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Tell us about your project.

We'd love to hear what you're working on.

Work with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.