css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- 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 -->
  </header>

<!-- #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>

    <sidebar>
    <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>
    <figure>
    <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>
    </figure>
    
       <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>
    
    <figure>
    <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>
    </figure>
    
    <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>
     
    </sidebar>

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

  </section>

</div> <!-- end .page-wrap -->
            
          
!
            
              /* http://www.paulirish.com/2012/box-sizing-border-box-ftw */
*,
*:after,
*: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;
  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*/
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console