CodePen

HTML

            
              <div class="row sixteen columns" id="nav-toggle"> 
  		<div class="nav-toggle">
				<a href="javascript:toggleDiv('top-nav');">Menu <i class="icon-reorder"></i></a>
			</div>
		</div>


<div class="row sixteen columns" id="top-nav">
			
			<nav class="top-nav inner-shadow">
				<ul>
					<li>
						<a href="#">Home</a>
					</li><li>
						<a href="#">About</a>
					</li><li>
						<a href="#">Services</a>
					</li><li>
						<a href="#">Portfolio</a>
					</li><li>
						<a href="#">Blog</a>
					</li><li>
						<a href="#">Contact</a>
					</li>
				</ul>
			</nav>
		</div>
            
          
!
via HTML Inspector

CSS

            
              .top-nav {
  border: 1px solid #333333;
	border-radius: 5px;
	color: #FFFFFF;
	background: #6db3f2;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkYjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0YTNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzM2OTBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTY5ZGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));
	background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
	background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
	background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
	background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
}

#top-nav {
	display: block;
}

.top-nav ul {
	padding: 0px;
	margin: 0px;
}

.top-nav ul li {
	margin: 0px;
	display: inline-block;
	list-style-type: none;
}

.top-nav ul li a {
	padding: 0.75em;
	border-right: 1px solid #333333;
}

.top-nav a:link {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	height: 100%;
}

.top-nav a:active {
	
}

.top-nav a:hover {
	text-decoration: underline;
	background-color: #333333;
	
}

.top-nav a:visited {
	
}

.nav-toggle {
	display: none;
}

#nav-toggle {
	display: none;
}


/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		
		#top-nav {
			display: none;
		}
		
		.top-nav ul li {
			margin: 0px;
			display: block;
			list-style-type: none;
			text-align: center;
		}
		
		.nav-toggle {
			display: block;
		}
		
		#nav-toggle {
			display: block;
		}
		
		
	}
	
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
                function toggleDiv(divId) {
    $("#"+divId).toggle();
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................