Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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