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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                header.header-wrap
	.header
		h2.header__title Sitename

#menu

.content-wrap.content-wrap--content#content
	.content
		h3 Content
		p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quibusdam temporibus et deleniti nam, ducimus impedit excepturi. Architecto sequi fugit illum maiores qui, facere. Accusantium maxime, eius quam asperiores odit odio quae sequi eos inventore quidem in tenetur fugiat aliquid doloribus? Ex labore, quasi commodi fugiat, cumque alias. At quae quaerat veritatis optio fuga dolorum nesciunt accusantium asperiores hic rem itaque, nisi cupiditate in, nostrum iste cumque non, libero laborum voluptatem eligendi natus debitis, nam. Unde, in autem ipsa impedit officia, molestiae aliquam. Dolore facilis tenetur labore, dicta eligendi dolorem natus reprehenderit. Temporibus ut nulla ullam eum facilis sunt. Iusto, animi! Omnis minus soluta temporibus animi. Expedita, at saepe quisquam perspiciatis quo ab perferendis molestias, possimus officia tempora temporibus aperiam. Rerum deleniti praesentium reiciendis culpa cum maxime ipsum, provident eaque facere quia exercitationem adipisci molestias eum hic facilis, quos, repudiandae velit consectetur tempora itaque quasi repellendus obcaecati at. Dolor culpa animi minus, libero quisquam distinctio cumque dolores, inventore ipsa magni in alias repellendus neque vel commodi, est doloribus dolorum ratione deleniti non. Iure error quam aliquid doloribus sit, tenetur incidunt beatae et deserunt in distinctio unde odio vel saepe reprehenderit iste tempore maiores sunt nesciunt autem omnis nisi repellendus eius quibusdam earum. Delectus iusto perspiciatis eum dolore maiores ex ipsa rem quam expedita! Corporis delectus in perspiciatis ipsum, quaerat, amet cumque a eligendi laborum dicta. Officiis, omnis, consequatur. Ipsa accusantium quos rerum, tempora, amet quia, provident saepe, similique fuga recusandae aspernatur maxime quis alias placeat debitis! Cum architecto excepturi obcaecati voluptate a culpa, sed iste illo rerum libero aliquid in delectus pariatur ipsa molestias possimus voluptatum, natus asperiores nemo nobis quis doloremque impedit necessitatibus. Dolorum laboriosam consequuntur expedita molestias eius placeat unde libero aspernatur quo animi, dicta doloribus laborum dolore corrupti sit minus totam pariatur fugit. Suscipit, unde, at? Atque ut nobis aliquid ad iste voluptates quidem itaque dolores deleniti totam, optio aspernatur tenetur amet, non sint. Provident necessitatibus, aut ab modi facilis aperiam nobis vel fugit omnis accusamus pariatur eos. Quis assumenda incidunt accusantium odit quod dicta veritatis vitae itaque laboriosam tempora ut labore natus fugit ipsam eligendi laudantium nemo, voluptates modi minima, unde, dolorum iure omnis totam, aliquam delectus! Vero esse non minima, mollitia impedit sint deserunt! Eius ipsa cum harum quaerat ad sit facere provident, molestias rerum quasi. Voluptate alias pariatur adipisci nemo possimus aspernatur quidem, doloribus, blanditiis necessitatibus modi suscipit, maxime odit in facere! Maiores sed fuga, blanditiis explicabo dolores. Ad incidunt, tempore repellat, expedita, animi fuga obcaecati neque ipsum quae totam at eius rem non ipsa! Molestias sint incidunt enim veritatis explicabo, perferendis laboriosam dolorum laborum quisquam maxime non asperiores! Totam nesciunt repellat cumque, ad mollitia, facilis eius accusantium possimus eaque labore, laboriosam sint quidem velit nobis ex odit dolor saepe esse quos quaerat atque autem ratione? Earum vel consectetur consequuntur dolorem vero velit explicabo, eaque eos officia non sit, expedita, quo molestiae deleniti ullam, maxime veniam. Reprehenderit fugiat, quo iure, eum saepe a? Odio sit facilis ducimus maiores, accusamus quam tempora minus, quidem sed.

.content-wrap.content-wrap--info#info
	.content
		h3 Info
		p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod expedita recusandae commodi dolor eligendi nam aut ipsa odit eveniet laborum, explicabo maiores aliquid eum exercitationem impedit culpa optio tempore dolorem laudantium sequi iure aliquam temporibus ad, provident soluta. Voluptas magni error alias iusto fugit, reiciendis, quod minima enim voluptatem temporibus nostrum, quam incidunt maxime iste assumenda inventore expedita ad at cumque ratione aliquid modi fuga! Facere molestiae praesentium quibusdam, ut accusamus dicta earum laborum, aut rerum, tempora tempore asperiores beatae distinctio quaerat vitae, nisi veniam alias quia vero in quas quidem. Fugiat consequatur, tempora molestiae harum quisquam pariatur magnam. Aliquid, incidunt, neque! Ab assumenda odit placeat tenetur illum reiciendis quis libero cupiditate laborum officia exercitationem saepe, molestias a nulla fugit qui facere nemo dignissimos, vero soluta. Officia praesentium voluptatum totam quos eligendi perferendis ab, explicabo aspernatur voluptate molestiae. Debitis illum, quasi id maiores. Amet eos in doloribus iure impedit sunt itaque nulla quidem est sapiente aspernatur animi, ex exercitationem perferendis dolor aperiam veniam facilis ducimus consequatur corporis quod ratione, eius consectetur debitis? Rem, dolorem! Consequuntur autem obcaecati iure illum quasi sint dicta possimus sed voluptatum non, ex eum sunt assumenda libero provident molestiae ad, consectetur accusamus est sapiente et delectus recusandae! Fuga cum quia id accusamus doloribus cupiditate ut, ad tempore eos magnam, quisquam, quos rem amet dolores architecto corporis. Illum voluptates, vero? Debitis unde, dolorum beatae quos earum. In recusandae explicabo tempore animi facere. Architecto eum soluta vero impedit quia, perferendis incidunt velit tenetur illo optio rerum, rem ab harum delectus voluptatum! Aut amet facilis temporibus illo, sit iure, dolore natus in consequatur, nobis quo adipisci. Inventore eum aspernatur, dicta saepe vero doloremque, sequi porro numquam eligendi quo enim minus facere veniam ut rem velit, deleniti cupiditate amet ad fugit? Voluptate necessitatibus mollitia vero non ratione quo, perferendis labore illum facilis praesentium sint, eius dolore eaque atque! Reprehenderit molestiae aperiam ex esse soluta quos, quaerat cupiditate fugiat vero, perferendis atque porro, nemo laboriosam quo quis illum ad omnis? Quis ipsa harum iusto error fugiat itaque unde ducimus delectus id. In perferendis voluptatem, laborum quaerat aliquid, cupiditate accusamus sed atque iusto vitae numquam similique architecto nesciunt excepturi provident. Iusto officia a, quo eos quas id hic vero laborum est ea sequi asperiores repellat distinctio architecto similique harum dicta! Ullam sequi corrupti aspernatur porro quis eligendi assumenda voluptate. Quisquam error consectetur cumque sunt sapiente ratione id eveniet perferendis necessitatibus aliquid? Nisi facilis numquam voluptate, nobis. Incidunt blanditiis debitis cum quidem deserunt aliquid, nisi sapiente perspiciatis atque quae quas amet ex labore vel soluta aliquam, unde. Laboriosam illum aut adipisci quis saepe minima doloremque quas vel debitis, eveniet consectetur, quidem quia aliquid sunt nam quibusdam a minus sint. Fuga maiores rem, incidunt iste, sint totam earum similique non, consectetur doloremque distinctio pariatur. Enim quae, odit eius consequatur est eum asperiores voluptate minus eligendi dolores saepe itaque, omnis quia sed recusandae optio eos veniam soluta veritatis in tenetur nesciunt cum voluptas harum. Minus corrupti iste praesentium impedit dolore, dolor! Fugit corporis dolore accusantium.

.content-wrap.content-wrap--map#map
	.content
		h3 Map
		p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat impedit, consequuntur ullam corporis velit culpa quisquam, iste eum possimus ex eius magni cumque tenetur ad ipsum laudantium maiores repudiandae dolores vel exercitationem! Corporis reprehenderit doloribus dicta non laborum possimus iste. Dignissimos labore, quam. Libero praesentium perferendis consequatur, sint? Laborum sunt officiis aperiam ducimus illo quidem, placeat aut, expedita dolores temporibus fugiat ipsam ut, quo commodi nam tempora. Obcaecati aliquam sint facere optio consequatur reprehenderit a, libero veniam, accusantium dolore, itaque architecto expedita modi. Ex qui magnam at, dolores aliquam excepturi libero ea provident rerum minima corrupti voluptate doloribus sunt quo, voluptatibus quas praesentium dicta deleniti consectetur laudantium. Quam magnam dolorem magni, est. Explicabo incidunt culpa ducimus, praesentium qui, laborum? Possimus est iusto dolores quis quos, dicta in voluptates, tenetur iste doloremque at cumque accusantium quae rerum voluptatem vitae repudiandae. Omnis, iste magnam ratione, animi temporibus eius ipsa. Saepe corrupti ex accusantium facilis repellendus, nostrum, omnis assumenda ipsa deserunt error explicabo doloremque maiores id, magnam dolor autem illo numquam iusto harum nobis repudiandae. Aliquid ratione nobis, laboriosam minus rerum architecto doloribus delectus perspiciatis aliquam perferendis animi, deleniti quam cupiditate pariatur vero tempora at, suscipit optio laudantium voluptatem voluptates numquam enim. Placeat optio sit, doloremque rem dolor quod est in perferendis. Voluptates, provident aspernatur, dolore modi adipisci voluptatum consequuntur eum, ea laboriosam at delectus voluptatibus. Alias repudiandae perferendis, velit explicabo porro tenetur eveniet iusto odit, eaque deleniti magni itaque. Quo ipsam, minus in nisi, incidunt expedita cumque numquam beatae, illo eaque velit eveniet obcaecati. Aut saepe maxime facilis dolores, quo quis at ad necessitatibus veritatis eos incidunt corrupti distinctio numquam! Quae iusto aliquid veritatis deleniti modi ullam temporibus explicabo nostrum cum amet, perferendis asperiores aspernatur officiis totam architecto fugiat, tempore quo autem? In provident nam aspernatur necessitatibus eius libero voluptas optio vitae. Quibusdam, distinctio, at. Perferendis, voluptatibus soluta asperiores cum eveniet deserunt quis atque, quibusdam omnis laborum illo recusandae architecto cupiditate aspernatur amet ab numquam labore totam vel quam aliquam. Quos quisquam, ducimus quae deserunt quasi quas expedita incidunt! Nesciunt inventore hic voluptate in ab cupiditate sunt, non rem aliquam. Porro non facere repellat necessitatibus eos nam, assumenda totam. Pariatur cum ipsa distinctio in enim voluptatibus, iusto nobis, quibusdam eveniet obcaecati delectus accusantium commodi quod natus ab? Distinctio dicta a asperiores nulla nemo, illo ducimus quisquam numquam ipsum! Accusantium nulla accusamus, architecto expedita ex nihil saepe nostrum pariatur corrupti et eum ad perspiciatis qui voluptas tenetur nobis illo rem, explicabo a corporis illum perferendis, quia cumque molestias. Sit, sunt consequatur laborum quas provident est dignissimos itaque optio eum tempora quod molestias voluptate, voluptas minima. Tempora adipisci, necessitatibus. Iste officiis ullam porro commodi, minima vitae quos veritatis quaerat repellendus laboriosam quod et nobis, alias voluptatum repudiandae modi. Minus unde quidem, eligendi, id, ducimus officia reprehenderit alias quibusdam quia officiis exercitationem repellat molestias. Ex nemo magni perferendis nulla, qui quae architecto quisquam tempore eum tempora sint molestias at soluta consequatur, earum aspernatur accusamus voluptatibus officiis voluptates! Dolores vel ea, laborum voluptatum ratione, quis est!

.content-wrap.content-wrap--reviews#reviews
	.content
		h3 Reviews
		p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, at natus delectus enim tempore suscipit magnam eligendi facere voluptatum rem nostrum inventore reiciendis aspernatur accusamus aperiam commodi ipsum ut totam quos ab excepturi. Quisquam in blanditiis possimus, amet voluptatem itaque pariatur aliquam odio, culpa ipsum molestiae error quo adipisci, voluptate minus! Odio accusantium, sit totam repudiandae necessitatibus quidem quasi atque quis! Placeat similique accusamus alias suscipit deleniti velit accusantium nulla iusto delectus ex veritatis, temporibus eius facilis beatae! Laudantium ipsum, quas a veritatis illo provident omnis, mollitia. Minus eligendi dolorem beatae, sapiente tenetur, veniam accusantium excepturi atque est aliquid, corporis rerum expedita reprehenderit sint deserunt! Quas maxime ea non aspernatur laboriosam voluptatibus impedit deleniti sunt officia alias dolorem, consequatur vero amet possimus fuga assumenda. Dolorem architecto facere vero et magni labore, facilis natus rerum autem, nemo, unde pariatur commodi cum perferendis dicta dolore vitae omnis quibusdam excepturi praesentium eius quod atque quia beatae. Asperiores deleniti ut ipsam consectetur consequuntur fuga non odio voluptatibus, quidem saepe quasi nisi perspiciatis perferendis quas veniam quisquam vero nobis cumque quis praesentium ab eius? Ullam est, officiis in distinctio ipsa doloremque ducimus error nam unde neque, necessitatibus dolores harum. Eos animi illo distinctio vel dicta id enim a, beatae iure, ipsam, ab officiis voluptatum maxime. Cum dolorem voluptatem tempora accusantium laudantium in quo consequatur minima id fugiat, adipisci provident accusamus impedit expedita nobis odio delectus, nihil atque ducimus quia. Accusantium, asperiores incidunt maxime veritatis debitis sit inventore odit maiores ipsam sint dolores beatae, ratione aliquam corrupti! Ipsam modi culpa quasi? Quibusdam nostrum provident repudiandae quam nesciunt, beatae neque asperiores, ratione et magni iure voluptate ab ex molestias nulla sed aut sint id, perspiciatis, excepturi perferendis! Deserunt magnam est voluptatem, quidem voluptatum corporis ipsum eos. Dolorum, repudiandae quam sequi itaque, quaerat cumque culpa sint, illum nulla nesciunt dolore blanditiis tempora eum doloremque neque alias quia, autem corrupti delectus odio quisquam repellendus similique voluptatem? Laboriosam impedit explicabo laudantium suscipit veritatis provident soluta ipsa aliquam perspiciatis modi. Quam deleniti iusto placeat cupiditate nam quas modi eveniet, minus quisquam omnis unde quo distinctio dolor necessitatibus sed aliquam mollitia animi labore reiciendis aperiam ab assumenda. Magni libero, earum doloremque ratione! Consectetur nostrum minus, mollitia numquam autem, facere error voluptate culpa at, tempora officiis distinctio. Architecto minus, voluptatibus recusandae quisquam ea voluptates repellat nostrum vero quaerat, ipsam dolores sit eligendi omnis culpa placeat atque quam alias! Ullam voluptatum, reprehenderit ad cum assumenda, saepe hic facilis id veniam alias possimus molestiae quae consectetur, accusamus similique! At consequuntur accusantium eaque expedita laborum facilis hic corporis eum odit dolore eveniet illo, omnis beatae magni temporibus soluta consequatur enim tempora iste quod, sapiente. Mollitia eum hic, expedita assumenda vitae modi harum tempore quibusdam laudantium, cumque, incidunt quia nisi architecto eius reiciendis doloremque error temporibus perspiciatis aliquid natus fuga. Porro quibusdam id praesentium aut eum ullam consequuntur sit quas excepturi laboriosam esse assumenda similique quod et libero hic ipsum laudantium quis architecto, recusandae fugiat aliquid explicabo, magni. Nesciunt, quod eos dolore quibusdam obcaecati accusantium veniam voluptatum!

.content-wrap.content-wrap--price#price
	.content
		h3 Price
		p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, adipisci aut dicta nisi sed, quod dolores laborum alias modi omnis consectetur iste incidunt ducimus nesciunt impedit dolorum inventore odit? Error perspiciatis exercitationem itaque debitis nesciunt natus quae unde quidem molestias, ullam cupiditate nam dicta ducimus totam libero saepe illo officia incidunt delectus tenetur veritatis aut necessitatibus! Doloremque numquam minima minus veritatis. Libero consectetur soluta placeat porro, natus culpa autem nesciunt quod repellendus quis doloribus laudantium suscipit similique nisi magnam, illo non molestiae! Inventore mollitia aperiam, aliquam repellat sequi porro earum aliquid deserunt. Excepturi placeat, suscipit ab! Sequi expedita ex voluptatum, voluptas libero! Alias recusandae beatae esse placeat ratione laborum, iste voluptates numquam. Error, aliquam impedit! Dolore deleniti, esse molestiae temporibus non dignissimos consectetur ducimus dolorem modi tenetur. Ipsam cupiditate eveniet sunt optio? Est accusamus autem eaque cupiditate nemo ad saepe provident architecto porro consequatur hic ullam mollitia voluptates aliquid tenetur, numquam similique sit quia, incidunt dolore quae. Dolor deleniti corporis cum, vel facilis optio rerum dolorem error modi, dolore, voluptas cupiditate, eos repellendus sed molestiae. Ab ullam ducimus, blanditiis distinctio eos omnis facilis possimus repellat nobis nesciunt. Fuga ducimus nostrum unde, possimus ab a, alias tempore ad perferendis in vero quia quasi tempora, eius adipisci, tenetur iure modi voluptas blanditiis vel quae vitae. Dignissimos hic, sunt. Libero, suscipit sit placeat doloremque odio architecto consectetur atque fugiat, eligendi accusantium obcaecati temporibus, ut sed? Soluta illo natus eius reprehenderit excepturi culpa, non distinctio unde error voluptas odio nam praesentium nostrum ipsa saepe optio quo? Dolore, aliquid, omnis voluptatem illum laudantium minus cupiditate provident in fugit, sit distinctio alias optio est voluptate odit perspiciatis a placeat saepe! Ea culpa, ab! Vitae, aspernatur. Cupiditate nobis facilis, excepturi beatae labore voluptatem commodi quos similique est eius enim amet iste voluptas, sunt aperiam voluptatibus adipisci vel tempora dicta repellat magnam molestias suscipit quasi autem. Blanditiis cupiditate ut cum sunt laborum amet, iusto soluta ab officia magni reiciendis rem ipsam accusamus aliquid repellendus maxime voluptate corporis saepe, ex rerum est eveniet asperiores deleniti ipsa. Consectetur repudiandae facere magnam odit, accusamus, harum, commodi et rem, itaque labore incidunt iure id ullam quo quisquam. Perspiciatis earum numquam deleniti eius minima, magni magnam sunt facere nulla exercitationem. Ea ut, sapiente. Enim consequuntur, iusto, voluptatum fuga doloremque corporis voluptate labore. Ratione ad, repudiandae magnam mollitia, odio repellat itaque provident quod consequuntur. Possimus, laudantium delectus rem, quod obcaecati consequuntur temporibus laboriosam quis ipsa aut magni quae odit iusto. Molestias possimus laboriosam magni quas dolore distinctio odit doloremque quis nemo aliquam hic suscipit sapiente, officiis fugit unde obcaecati dicta recusandae? Nam minus soluta facere rerum minima quibusdam maxime dolorem recusandae quos magni qui, asperiores iure ad quasi doloremque obcaecati nihil vel expedita cumque quidem reiciendis officia molestiae. Harum corporis voluptas odio modi, est laboriosam veritatis labore accusantium deleniti. Nulla recusandae nostrum sint vitae. Ullam maiores, adipisci cumque minima inventore deserunt facere asperiores similique quam pariatur ducimus debitis recusandae temporibus quibusdam at sint, veniam amet? Enim recusandae quo sed officiis nisi, similique earum cum.
footer.footer-wrap
	.footer
		h2.footer__title Footer
              
            
!

CSS

              
                $menu-height: 64px;
$header-height: 100px;
$header-color: #3BAEA0;
$footer-height: 100px;
$trans: .3s ease;
$font-heading: Pacifico, cursive;
$font-text: Dosis, sans-serif;

@keyframes menu-height {
	0% {
		transform: scaleY(0);
	}
	
	100% {
		transform: scaleY(1);
	}
}

html, body {
	margin: 0;
}

html {
	min-height: 100%;
}

html {
	font-family: Arial, sans-serif;
}

.content-wrap,
.header-wrap,
.footer-wrap,
.menu-wrap {
	display: flex;
	justify-content: center;
}

.content,
.header,
.footer,
.menu,
.menu-items--regular {
	flex-basis: 960px;
}

.header,
.footer {
	display: flex;
	align-items: center;
	justify-content: center;
	
	&__title {
		text-align: center;
		
		line-height: 1;
		font-size: 44px;
		margin-top: 0;
		margin-bottom: 0;
		font-family: $font-heading;
		font-weight: 400;
	}
}

.header {
	
	&__title {
		text-shadow: 4px 4px 0 darken(#3BAEA0, 10%);
	}
}

.header-wrap {
	background-color: $header-color;
	color: #fff;
}

.header {
	height: $header-height;
}

.footer {
	height: $footer-height;
}

.footer-wrap {
	color: #fff;
	background-color: #0C9CEE;
}

.content {
	padding-top: 1em;
	padding-bottom: 1em;
	
	h3 {
		margin-top: 12px;
		margin-bottom: 26px;
		line-height: 1;
		text-align: center;
		font-size: 42px;
		font-weight: 600;
		font-family: $font-text;
	}
	
	p {
		margin-top: 1em;
		margin-bottom: 0;
		font-family: $font-text;
		font-size: 20px;
		line-height: 1.6;
	}
}

.menu-wrap {
	right: 0;
	left: 0;
	// transition: background-color $trans;
	
	&--regular {
		position: absolute;
		z-index: 1;
		top: $header-height;
		background-color: #3BAEA0;
	}
	
	&--float {
		position: fixed;
		top: 0;
		background-color: #3BAEA0;
		color: #fff;
		animation: .3s menu-height both;
		transform-origin: top center;
	}
}

$block-colors: (content, #FF2865), 
					(info, #8F1383), 
					(map, #4D6DE3), 
					(reviews, #1FB57B), 
					(price, #591FCE);

@each $type, $color in $block-colors {
	.content-wrap--#{$type} {
		background-color: $color;
		color: #fff;
	}
	
	.menu-wrap--#{$type} {
		background-color: darken($color, 10%);
	}
}

.menu-items {
	display: flex;
	justify-content: space-between;
	
	&--regular {
		font-size: 24px;
	}
	
	&--float {
		font-size: 22px;
		flex-grow: 1;
		margin-left: 5em;
	}
}

%item-active {
	&::before {
		content: '';
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background-color: #fff;
	}
}

.menu-item {
	text-decoration: none;
	color: #fff;
	height: $menu-height;
	line-height: $menu-height;
	position: relative;
	z-index: 1;
	font-family: $font-text;
	font-weight: 600;
	
	&:hover {
		@extend %item-active;
	}
	
	&--active {
		@extend %item-active;
	}
}

.content-wrap {
	padding-top: $menu-height;
	padding-bottom: $menu-height;
}

.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	&__logo {
		color: #fff;
		text-decoration: none;
		font-family: $font-heading;
		line-height: 1;
		font-size: 28px;
	}
}
              
            
!

JS

              
                class MenuItems extends React.Component {
	render() {
		var itemsCls = `menu-items menu-items--${this.props.type}`;
		
		return (
			<nav className={itemsCls}>
				{this.props.items.map((el, i) => {
					var url = `#${el.url}`;
					return (
						<a key={i} 
							href={url} 
							className={this.props.isActive(i)}>{el.title}</a> 
							// onClick={this.props.onClick.bind(this, i)}>{el.title}</a>
					);
				})}
			</nav>
		);
	}
}

class Menu extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			float: false,
			active: null,
			anchor: false
		}
		this.onScroll = this.onScroll.bind(this);
		this.isActive = this.isActive.bind(this);
		this.setActivee = this.setActive.bind(this);
		this.$blocksInit = this.$blocksInit.bind(this);
		this.$computeCoordinates = this.$computeCoordinates.bind(this);
		this.$globalEvents = this.$globalEvents.bind(this);
		this.$offsetInit = this.$offsetInit.bind(this);
		// this.$scrollThrottler = this.$scrollThrottler.bind(this);
		this.onResize = this.onResize.bind(this);
		this.$resizeThrottler = this.$resizeThrottler.bind(this);
	}
	
	$resizeThrottler() {
		if (!this.$resizeTimeout) {
			this.$resizeTimeout = setTimeout(
				() => {
					this.$resizeTimeout = null;
					this.onResize();
				}, 66);
		}
	}
	
	$computeCoordinates(elements) {
		var coordinates = elements.map((element) => {
			var block = document.getElementById(element.url).getBoundingClientRect();
			return {
				top: window.pageYOffset + block.top,
				bottom: window.pageYOffset + block.bottom
			}
		});
		return coordinates;
	}
	
	$blocksInit() {
		var menu = document.querySelector('.menu-items');
		this.$menuOffset = menu.getBoundingClientRect().top;
		this.$menuFullOffset = this.$menuOffset + menu.offsetHeight + window.pageYOffset;
		this.$visibleBlocks = this.$computeCoordinates(this.props.items);
	}
	
	$globalEvents() {
		window.addEventListener('scroll', this.onScroll);
		window.addEventListener('resize', this.$resizeThrottler);
	}
	
	$offsetInit() {
		var offset = window.pageYOffset;
		
		if (offset >= this.$menuOffset) {
			this.setState({ float: true });
		} else {
			this.setState({ float: false, active: null });
		}
				
		this.$visibleBlocks.forEach((elem, i) => {
			if (offset >= elem.top && offset < elem.bottom) {
				this.setState({ active: i });
			}
		});
	}
	
	componentDidMount() {
		this.$blocksInit();
		this.$globalEvents();
	}
	
	componentWillUnmount() {
		window.removeEventListener('scroll', this.onScroll);
		window.removeEventListener('resize', this.$resizeThrottler);
	}
	
	onScroll() {
		this.$offsetInit();
	}
	
	onResize() {
		this.$blocksInit();
		this.$offsetInit();
	}
	
	setActive(i) {
		this.setState({ active: i, anchor: true });
	}
	
	isActive(i) {
		return 'menu-item' + (this.state.active == i ? ' menu-item--active' : '');
	}
	
	render() {
		var cls = 'menu-wrap menu-wrap--' + (this.state.float ? 'float' : 'regular') + (this.state.active !== null ? ' menu-wrap--' + this.props.items[this.state.active].url : '') + (this.state.anchor ? ' menu-wrap--anchor' : '');
				
		var menuRegular = (
			<MenuItems type='regular'
					     items={this.props.items}
						  isActive={this.isActive.bind(this)} />
		);
		
		var menuFloat = (
			<div className='menu'>
				<a className='menu__logo' href='#'>Sitename</a>
				<MenuItems type='float'
						  	  isActive={this.isActive}
					        items={this.props.items}  />
			</div>
		);
		
		return (
			<div className={cls}>
				{this.state.float ? menuFloat : menuRegular}
			</div>
		);
	}
}

var items = [
	{
		title: 'Content',
		url: 'content'
	},
		{
		title: 'Info',
		url: 'info'
	},
		{
		title: 'Map',
		url: 'map'
	},
		{
		title: 'Reviews',
		url: 'reviews'
	},
		{
		title: 'Price',
		url: 'price'
	}
];

ReactDOM.render(
	<Menu items={items} />,
	document.getElementById('menu')
);
              
            
!
999px

Console