Fixed menu scroll in CSS only

HTML
<header> <nav> <h1>Nav<a href="http://anaislab.com/" target="_blank">Fix</a></h1> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Gallery</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Contacto</a> </li> </ul> </nav> <nav id="small"> <h1><a href="http://anaislab.com/" target="_blank">Nav</a>Fix</h1> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Gallery</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Contacto</a> </li> </ul> </nav> </header> <div id="content"> <h2>Scroll!</h2> </div>
CSS
@import url(http://fonts.googleapis.com/css?family=Pacifico|Roboto:400,500); nav { background: #333; overflow: auto; padding: 60px; position: relative; z-index: 2; } nav h1 { color: #eee; font-family: 'Pacifico', cursive; font-size: 42px; float: left; } nav h1>a { color: #3ab4a6; text-transform: uppercase; font-weight: bold; letter-spacing: 0.1em; text-decoration: none; transition: all 200ms linear; } nav h1>a:hover { background: none; color: #C18055; } ul { text-align: center; float: right; } ul li { display: inline-block; } ul li a { text-decoration: none; display: block; padding: 5px 10px; margin: 0 10px; color: #eee; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 14px; line-height: 32px; font-weight: bold; transition: all 200ms linear; } nav a:hover, nav#small a:hover { color: #C18055; background: #fff; } nav#small { background: #fff; padding: 20px 40px; position: fixed; box-sizing: border-box; width: 100%; top: 0; z-index: 1; box-shadow: 0px 2px 2px #fff; } nav#small h1, nav#small a { color: #333; } nav#small h1 { font-size: 38px; } nav#small h1>a { color: #C18055; } nav#small h1>a:hover { color: #3ab4a6; } div#content { height: 2200px; background: url('https://s-media-cache-ak0.pinimg.com/originals/03/95/6f/03956fed74537b3d7b0858e9a814748d.jpg')repeat 0 0; opacity: 0.9; } div#content h2 { color: #fff; font-weight: bold; transform: rotate(-10deg); line-height: 60px; font-size: 48px; text-transform: uppercase; position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; position: absolute; width: 10%; bottom: 10%; text-shadow: 2px 2px 2px #333; font-family: 'Pacifico', cursive; } div#content h2:before { display: inline-block; background: url('http://www.menoftheras.com/wp-content/gallery/test/arrow.png')no-repeat 0 0; background-size: cover; width: 239px; height: 200px; content: ""; transform: rotate(-80deg); margin-bottom: 40px; } @media (max-width: 700px) { nav { padding: 20px; } nav h1 { display: block; float: none; text-align: center; padding: 20px; } nav ul { float: none; padding: 20px; } div#content h2 { width: 30%; } nav#small { padding: 20px; } nav#small ul { padding: 5px; } nav#small h1 { padding: 10px; font-size: 28px; margin-bottom: 5px; } nav#small a { font-weight: normal; } }
JAVASCRIPT
Expand for more options Login