LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


    

Fixed Header Design Pattern:

Height Specified

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
CSS
/* http://www.paulirish.com/2012/box-sizing-border-box-ftw */
*,
*:after,
*:before { /* Safari/Chrome, other WebKit */    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

html { 
  overflow-y: scroll; 
  overflow-x: hidden; 
  height: 100%; 
  margin: 0;
  padding: 0; 
}

body { 
  height: 100%;
  margin: 0;
  padding: 0; 
}
  
/* match backgrounds to blend in */
body, .header-top {  background: #eaeaea; }

/*.header-top { background: rgba(234,234,234, 0.85); }*/

/* can't assume only one "header" element in HTML5 */
.header-top { 
  /* pin to top - 0 is default */
  position: fixed;
  /* raise z-index to cover */
  z-index: 1;
  /* in this example, height is fixed -- set on .header-content-wrap 
     below -- and used to derive padding-top on .main div */
  min-height: 128px;
  /* 100% - .header-wrap can be a percentage - 
     also covers full width when zoomed */
  width: 100%;
}

/* .header-top:after {
  transition: height 1s linear;
  content:"";
  position: absolute;
  bottom:-1px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0,0,0,.1);
} */

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

.page-wrap {
  /* leave room for fixed header height -- matched below -- 
     padding-left and -right assigned above */
  padding-top: 128px;
}

/* padding-left and -right added above */
.header-wrap { 
  /* to position child elements absolutely */
  position: relative;
  /* declaring height in this example */
  height: 128px;
  /* padding overridden by absolutely positioning 
     on child element below */
  padding: 10px; 
  /* overflow:hidden optional -- if height declared 
     and .header-content resizes downward */ 
  /*overflow: hidden;*/
}

.header-content { 
  position: absolute;
  /* fill width regardless of content 
     (same as padding value above) */
  left: 10px;
  right: 10px;
  padding: 10px 2em;
  background: #bab2a0;
}

.header-content.align-center {
  top: 50%;
  margin-top: -7%; 
}

.header-content.align-bottom { 
  /* make header content resize upward */
  top: inherit;
  margin-top: inherit;
  bottom: 10px; }

.main { 
  padding: 1em 2em 2em;
  background: white; 
}

/* Example Media Queries - e.g., iPhone5 landscape width = 568px */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 599px) {
 
  .header-top { 
  /* unpin header so it scrolls with content */
    position: absolute; }
  
  /* even if you keep the header fixed, you might 
     change width to 100% for better mobile zooming */
  
  .page-wrap, .header-wrap { 
    width: 100%; }

}

/* for better mobile zooming, change percentage 
   from 80 or 90 to 100 when viewport = min-width */
@media only screen 
and (max-width : 320px) {
   
  .page-wrap, .header-wrap { 
    width: 100%; }

}

/* Presentational CSS Below */

/* force a vertical scrollbar to prevent a jumpy page */
html { overflow-y: scroll; }

body {
  line-height: 1.3125; }

.main { padding-bottom: 30em; }

sidebar { 
  display: block;
}

figure {
  margin: 1.5em auto 1em;
  padding: 8px;
  background: #f1f1ea;
  text-align: center; }

figure img {border: 4px solid #ffffff; }

figcaption {
  margin: .5em 0;
  color: #999;
  text-align: center;
  font-size: 85%;
  font-style: italic; }

h1 {margin: 0; line-height: 1.0625;}

h2 {color: #999; font-weight:300;}

header h2 {margin:0; color: #666;}

code {
  background: lightyellow;
  padding: 1px .25em;
  font-family: Menlo, Monaco, monospace;
  font-size: 90%;}

pre[rel]{
    position: relative;
    padding: .875em 0 0; }

pre[rel]:before{
    content:attr(rel);
    color:white;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:#e18728;
    font-family: sans-serif;
    padding:5px 0;
    text-indent:15px; }

pre code {
  display: block; padding: 1.5em; }

pre code i {
    color: #998;
    font-style: italic; }

.nowrap, nobreak, .nobr { white-space: nowrap; }

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: middle;
}

img.scale, object.scale {
  /* corrects small inline gap at bottom of containing div */
  display: block;
  /* weird Firefox bug: needs width:100% or else it will break context-block trick
     (where display:table-cell fills in remaining width after fixed-width column float) */
  width: 100%;
  max-width: 100%;
  /* just in case, to force correct aspect ratio */
  height: auto !important;
  /*width: auto\9; /* ie8+9, but alas, breaks in IE10 */
  /* lt ie8 */
  -ms-interpolation-mode: bicubic;
  /* optionally force a minimum size if img src size is known: */
  /* min-height: 320px; /* max-height of .crop-height */
  /* min-width: 480px; /* proportional to above */
}

.lt-ie9 img.scale, object.scale {
  width: auto\9; /* ie8+9 - need to test*/
}

Host Instantly Drag and Drop Website Builder

 

Description

My mix of elements to put a fixed header over centered, responsive content. Here, the height is specified and offset by top padding in the scrolling content.
Term
Mon, 11/27/2017 - 21:56

Related Codes

Pen ID
Pen ID
Pen ID