## In a Fix

When you pin your header to the top using `position:fixed` it's no longer contained by your page-wrap. So I start the .page-wrap after the header, and duplicate the width and margins on a wrapper div within the header:

    /* match backgrounds */
    body, .header-top { background: #eaeaea; }

    /* can't assume only one "header" in HTML5 */
    .header-top {
      /* pin to top - 0 is default */
      position: fixed;
      /* raise z-index to cover */
      z-index: 1;
      /* cover full width when zoomed */
      width: 100% }

    /* match widths, margins & padding */
    .page-wrap, .header-wrap {
      width: 90%;
      min-width: 320px;
      max-width: 640px;
      /* center on page */
      margin: 0 auto;
      /* separate content from window edge --
         here (not on body) to work with fixed header */
      padding: 0 10px;}

I also add a little padding between the window edge and the content, for when the window is at or below the min-width specified. (Yes, I'm just that anal.)

### Mobile: Your Call

Mobile Safari supports `position:fixed` ( with some quirks ), but that doesn't mean it's a good idea. Make sure to test your fixed header on mobile, in both orientations:

One line at a time on a sideways iPhone5. This fixed header needs a fix.

Consider using CSS media queries to target device-width or orientation and then change the header position from fixed to absolute, so that it scrolls — or make the fixed header more compact. You could also change the initial-scale:

`<meta name="viewport" content="width=device-width, initial-scale=.5">`

Scaling on iOS has its own idiosyncracies: Here, the fixed header tries to maintain its percentage-based width and reflow, whereas the scrolling content zooms off the screen and can be moved around freely (unless user-scalable=false). That's why I set the header at 100% with a background, so it always covers.

Scaling can be unpredictable with position: fixed

If you know the content will be scaled, you might choose to have your page-wrap and header-wrap set to 100% instead of 80 or 90 — or change it at smaller sizes with a media query, so that the header stretches to the edges.

It's become common practice to include `<meta name="viewport" content="width=device-width">` in the document head, but make sure that gives you the result you want. It's powerful meta mojo that you may not need if your site isn't fully-responsive.

### Hitting the Heights

In this example, I've specified a height for the header, knowing its content. I can decide how it will reflow when the window resizes, using media queries or absolute positioning (here, I have it expand up from the bottom).

But what if the header content is unknown or dynamic? One idea is to replace the top padding on the page-wrap with a duplicate of the header content and its styling (minus the position:fixed). The fixed header simply covers it — though I go ahead and set the duplicate to be invisible and ignored by screen readers. ( Example CodePen here — right-click to Open Link in New Tab.)

A last note: Remember that your #top anchor can't be in the fixed header.

Back to top