Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<!-- 	<meta name="viewport" content="width=device-width, initial-scale=1.0">  -->	
		<title>Blueprint: On-Scroll Animated Header</title>
		<meta name="author" content="Codrops" />
	</head>

	<body>
		<div id="container">

			<div class="header">					<!-- CONTAINER FOR HEADER -->
				<div class="inner">					<!-- THE 'REAL' HEADER PART -->					
					<div class="logo">
				 	 <img src="https://www.fizzwebdesign.co.uk/testcode/logo.jpg" alt="" />
					</div>
					
 					<h1>FIXED</h1>					
					
					<div class="nav">
						<a href="#">Broccoli</a>
						<a href="#">Almonds</a>
					</div>
				</div> <!-- inner -->
			</div> <!-- header -->





			<header class="clearfix">
				<span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span>
				<h1>On-Scroll Animated Header</h1>
				<nav>
					<a href="https://tympanus.net/Blueprints/ResponsiveMultiColumnForm" class="bp-icon bp-icon-prev" data-info="previous Blueprint"><span>Previous Blueprint</span></a>
					<!--a href="" class="bp-icon bp-icon-next" data-info="next Blueprint"><span>Next Blueprint</span></a-->
					<a href="https://tympanus.net/codrops/?p=15321" class="bp-icon bp-icon-drop" data-info="back to the Codrops article"><span>back to the Codrops article</span></a>
					<a href="https://tympanus.net/codrops/category/blueprints/" class="bp-icon bp-icon-archive" data-info="Blueprints archive"><span>Go to the archive</span></a>
				</nav>
			</header>	
			<div class="main">
				<section>
					<div><p>Dreamcatcher american apparel typewriter polaroid, Pinterest hoodie tousled vegan pickled gastropub iPhone VHS sartorial. Fanny pack vinyl fingerstache whatever, raw denim Carles literally next level fashion axe photo booth pour-over Echo Park.</p></div>
				</section>
				<section>
					<div><p>Raw denim selvage typewriter, thundercats viral craft beer beard keffiyeh meh. 3 wolf moon american apparel mlkshk street art single-origin coffee. Semiotics art party tote bag, wayfarers banh mi messenger bag Odd Future seitan photo booth. Twee vinyl fingerstache, freegan narwhal semiotics irony sustainable vegan 3 wolf moon ethnic selfies fixie kale chips. Odd Future chillwave twee Tonx kale chips, quinoa disrupt selfies art party Williamsburg Vice. Asymmetrical narwhal Godard, artisan single-origin coffee Bushwick hashtag semiotics literally disrupt pork belly trust fund fashion axe typewriter +1. Master cleanse raw denim trust fund bitters, gluten-free farm-to-table tousled plaid biodiesel actually pork belly roof party polaroid.</p></div>
				</section>
				<section>
					<div><p>Cardigan gluten-free photo booth pug, occupy ethnic bicycle rights disrupt ennui jean shorts art party raw denim Carles Tonx artisan. Freegan aesthetic skateboard, forage iPhone ugh umami tumblr McSweeney's chillwave biodiesel vinyl pitchfork gentrify asymmetrical. Sartorial synth wayfarers, freegan pork belly post-ironic ennui salvia direct trade shoreditch Wes Anderson pitchfork. Mumblecore Truffaut american apparel, Austin single-origin coffee post-ironic tofu retro Vice fanny pack narwhal Neutra skateboard 90's. Kogi sartorial post-ironic gentrify helvetica McSweeney's Schlitz, mustache 8-bit polaroid hella flexitarian viral kale chips tote bag. Banh mi PBR typewriter Banksy. Beard messenger bag deep v, keffiyeh lo-fi umami four loko vinyl lomo hoodie wolf banh mi.</p></div>
				</section>
				<section>
					<div><p>Artisan thundercats blog, VHS asymmetrical Schlitz whatever High Life chambray semiotics synth. Mustache flannel McSweeney's Carles gastropub put a bird on it. Occupy Pinterest try-hard PBR Schlitz, biodiesel disrupt forage. +1 pop-up Tonx, Echo Park thundercats authentic try-hard. Mlkshk pork belly artisan messenger bag raw denim cardigan Austin Portland, bicycle rights tumblr blog you probably haven't heard of them. Single-origin coffee seitan blog Williamsburg mlkshk, leggings cred meggings selvage synth next level McSweeney's pug 90's. Intelligentsia skateboard wolf, pour-over cred gastropub bespoke kogi DIY synth 8-bit hella dreamcatcher blog.</p></div>
				</section>
				<section>
					<div><p>Farm-to-table four loko narwhal tattooed salvia Etsy. Odd Future craft beer pop-up, sustainable synth wayfarers helvetica lomo forage freegan Banksy. Typewriter Williamsburg direct trade, forage banh mi asymmetrical thundercats street art you probably haven't heard of them actually freegan cred chillwave mustache. Actually Pinterest gluten-free, roof party gastropub you probably haven't heard of them blog. Pinterest Odd Future post-ironic, Echo Park selfies narwhal bespoke dreamcatcher american apparel iPhone raw denim. Selvage hella mixtape, Neutra Etsy before they sold out YOLO art party leggings Wes Anderson bespoke. Austin letterpress plaid kale chips biodiesel Pinterest gastropub banjo ugh.</p></div>
				</section>
				<section>
					<div><p>Put a bird on it Schlitz tousled, pitchfork Odd Future tote bag shabby chic vegan dreamcatcher Cosby sweater forage cliche. IPhone locavore 8-bit photo booth wayfarers direct trade blue bottle typewriter street art, trust fund pour-over cred biodiesel tote bag. Banjo artisan lo-fi, photo booth disrupt pitchfork banh mi hella wayfarers skateboard. Cardigan irony Williamsburg pitchfork small batch put a bird on it Terry Richardson Schlitz. Helvetica flannel banh mi hella, food truck Pinterest freegan tofu post-ironic. Banksy Vice four loko stumptown pour-over 8-bit biodiesel farm-to-table scenester, keytar ethical tofu seitan craft beer trust fund. Skateboard ennui cliche YOLO, art party Banksy 90's.</p></div>
				</section>
				<section>
					<div><p>Single-origin coffee vegan stumptown, cardigan selvage plaid locavore fashion axe Neutra Echo Park. 90's thundercats swag Odd Future ethical. Gastropub Wes Anderson next level ugh, hella Schlitz Austin mixtape PBR pop-up master cleanse bicycle rights tattooed kale chips Bushwick. Dreamcatcher pork belly literally banh mi, blog vinyl food truck tattooed cornhole +1 pop-up. DIY hashtag fingerstache, thundercats master cleanse Portland squid dreamcatcher keytar vinyl narwhal lomo cred Neutra. Wolf 3 wolf moon plaid, craft beer YOLO Tonx literally mlkshk selvage tumblr trust fund Godard seitan Carles chambray. Tofu leggings intelligentsia tumblr, single-origin coffee squid typewriter pork belly wayfarers hoodie Bushwick shabby chic meh.</p></div>
				</section>
				<section>
					<div><p>90's banh mi small batch helvetica authentic, vegan wayfarers vinyl meh hashtag. Pickled Tonx keffiyeh flannel gastropub, locavore salvia art party literally try-hard blog. High Life seitan banh mi Neutra, leggings swag you probably haven't heard of them pug bicycle rights pour-over retro fixie wayfarers Echo Park. Tofu vinyl pork belly, seitan kale chips bitters fingerstache put a bird on it butcher church-key occupy aesthetic DIY yr. Banjo dreamcatcher tumblr, actually Carles typewriter roof party. Pug thundercats DIY, 90's chambray gastropub actually intelligentsia Williamsburg Carles disrupt shabby chic. Butcher Schlitz fanny pack 8-bit, fingerstache occupy hoodie pug intelligentsia Carles letterpress umami organic irony.</p></div>
				</section>
				<section>
					<div><p>Food truck fap next level Odd Future sartorial craft beer selvage 90's. Asymmetrical Schlitz hoodie street art jean shorts squid. Locavore street art retro skateboard banjo, post-ironic small batch keffiyeh yr +1. Selfies cardigan sriracha Terry Richardson. Godard brunch kale chips, bespoke photo booth retro Bushwick deep v farm-to-table polaroid Williamsburg. Kogi biodiesel vinyl next level intelligentsia. Skateboard Carles viral, Godard helvetica PBR butcher.</p></div>
				</section>
			</div>
		</div>
		<!-- classie.js by @desandro: https://github.com/desandro/classie -->
	</body>
</html>
              
            
!

CSS

              
                #container { width: 960px; margin: 0 auto;  }

.header { position: fixed; top: 0; left: 0; width: 100%; background: #f6f6f6; z-index: 10000; height: 230px; overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s; }

.logo {  float: left; height: auto; border: 1px solid fuchsia;  /* originally had this too: background: url(logo.svg) no-repeat center center; background-size: auto 10em; */
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: scale(1);
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); }

.header-shrink .logo { 
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-o-transition: scale(0.6);
transition: all 0.3s;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6); }

.inner { width: 960px; margin: 0 auto;  border: 5px solid fuchsia; height: 100%; }

.header h1, .nav { display: inline-block; position: relative; }

 /* We just have one-lined elements, so we'll center the elements with the line-height set to the height of the header */
.header h1, .nav a { line-height: 230px; }

.header h1 { color: #333; letter-spacing: 4px; font-size: 72px; margin: 0; float: left; }

.nav { float: right; }
.nav a { color: #aaa; font-weight: 700; margin: 0 0 0 20px; font-size: 1.4em; }

/* Transitions and class for reduced height */
.header h1, .nav a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s; }

.header.header-shrink { height: 90px; }

.header-shrink h1, .header-shrink .nav a { line-height: 90px; }
.header-shrink h1, .header-shrink .nav a { font-size: 12px; }

/* default css */
/* General Blueprint Style */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
	font-family: 'bpicons';
	src:url('../fonts/bpicons/bpicons.eot');
	src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/bpicons/bpicons.woff') format('woff'),
		url('../fonts/bpicons/bpicons.ttf') format('truetype'),
		url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
	font-weight: normal;
	font-style: normal;
} /* Made with https://icomoon.io/ */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #47a3da;
}

a {
	color: #f0f0f0;
	text-decoration: none;
}

a:hover {
	color: #000;
}

.container {
	position: relative;
	margin-top: 15em;
}

.container > header,
.main section > div {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0 0 0.6em 0;
	float: left;
	font-weight: 400;
}

.container > header > span {
	display: block;
	position: relative;
	z-index: 9999;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
}

.container > header > span span:after {
	width: 30px;
	height: 30px;
	left: -12px;
	font-size: 50%;
	top: -8px;
	font-size: 75%;
	position: relative;
}

.container > header > span span:hover:before {
	content: attr(data-content);
	text-transform: none;
	text-indent: 0;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 110%;
	padding: 0.8em 1em;
	line-height: 1.2;
	text-align: left;
	left: auto;
	margin-left: 4px;
	position: absolute;
	color: #fff;
	background: #47a3da;
}

.container > header nav {
	float: right;
	text-align: center;
}

.container > header nav a {
	display: inline-block;
	position: relative;
	text-align: left;
	width: 2.5em;
	height: 2.5em;
	background: #fff;
	border-radius: 50%;
	margin: 0 0.1em;
	border: 4px solid #47a3da;
}

.container > header nav a > span {
	display: none;
}

.container > header nav a:hover:before {
	content: attr(data-info);
	color: #47a3da;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	pointer-events: none;
}

.container > header nav a:hover {
	background: #47a3da;
}

.bp-icon:after {
	font-family: 'bpicons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-align: center;
	color: #47a3da;
	-webkit-font-smoothing: antialiased;
}

.container > header nav .bp-icon:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 2;
	text-indent: 0;
}

.container > header nav a:hover:after {
	color: #fff;
}

.bp-icon-next:after {
	content: "\e000";
}
.bp-icon-drop:after {
	content: "\e001";
}
.bp-icon-archive:after {
	content: "\e002";
}
.bp-icon-about:after {
	content: "\e003";
}
.bp-icon-prev:after {
	content: "\e004";
}

.main > section:nth-child(even) {
	background: #87cef8;
	color: #fff;
}

.main section:first-child > div {
	padding-top: 0em;
}

.main section p {
	margin: 0;
	padding: 1em 0;
	font-size: 1.8em;
	line-height: 1.5;
}

@media screen and (max-width: 55em) {

	.container > header h1,
	.container > header nav {
		float: none;
	}

	.container > header > span,
	.container > header h1 {
		text-align: center;
	}

	.container > header nav {
		margin: 0 auto;
	}

	.container > header > span {
		text-indent: 30px;
	}

	.main section p {
		padding: 2em 5%;
		font-size: 1.4em;
	}
}

              
            
!

JS

              
                
              
            
!
999px

Console