cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <!-- https://css-tricks.com/well-rounded-compound-shapes-css/  -->

    <header class="header-top dropshadow"> 
    <div class="header-wrap">
      <div class="header-content align-bottom">
        <h1>Fixed Header <span class="nobr">Design Pattern:</span></h1>
        <h2>Height Specified</h2>
      </div> <!-- end .header-content -->
    </div> <!-- end .header-wrap -->

<!-- #top link here, not in fixed header -->
<div id="top" class="page-wrap"> 
  <section class="main">
    <h2>In a Fix</h2> 
    <p>When you pin your header to the top using <code>position:fixed</code> it's no longer contained by your page-wrap.  So I start the .page-wrap <em>after</em> the header, and duplicate the width and margins on a wrapper div within the header:</p>

<pre rel="CSS"><code class="language-css">
<i>/* match backgrounds */</i>
body, .header-top { background: #eaeaea; }

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

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

    <h3>Mobile: Your Call</h3>
    <p>Mobile Safari supports <code>position:fixed</code> (<a href="http://caniuse.com/#search=position%3Afixed" target="_blank">with some quirks</a>), but that doesn't mean it's a good idea. Make sure to test your fixed header on mobile, in <em>both</em> orientations:</p>
    <img class="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23379/screenshot-iphone5-horiz_1.png" />
      <figcaption>One line at a time on a sideways iPhone5. This fixed header needs a fix.</figcaption>
       <p>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&#8201;&#8212;&#8201;or make the fixed header more compact. You could also change the initial-scale:</p>
    <p><code>&lt;meta name="viewport" content="width=device-width, initial-scale=.5"></code></p>
      <p>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.</p>
    <img class="scale" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23379/screenshot-header_90percent.png" />
      <figcaption>Scaling can be unpredictable with position: fixed</figcaption>
    <p>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&#8201;&#8212;&#8201;or change it at smaller sizes with a media query, so that the header stretches to the edges.</p>
    <p>It's become common practice to include <code>&lt;meta name="viewport" content="width=device-width"></code> in the document head, but make sure that gives you the result you want. It's powerful meta mojo that <a href="http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho" target="_blank">you may not need</a> if your site isn't fully-responsive.</p>

    <h3>Hitting the Heights</h3>
    <p>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).</p>
    <p>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&#8201;&#8212;&#8201;though I go ahead and set the duplicate to be invisible and ignored by screen readers. (<a href="https://codepen.io/parkerbennett/pen/hbzJm" target="_parent">Example CodePen here</a>&#8201;&#8212;&#8201;right-click to Open Link in New Tab.)</p>
     <p>A last note: Remember that your #top anchor can't be in the fixed header.</p>
    <a href="#top">Back to top</a>


</div> <!-- end .page-wrap -->
              /* http://www.paulirish.com/2012/box-sizing-border-box-ftw */
*:before { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* 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;
  position: absolute;
  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%;}

    position: relative;
    padding: .875em 0 0; }

    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*/


Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................