A Pen by Raymon Schouwenaar.

index.html

<div class="rwd_nav_wrapper" id="top_nav">
					<input type="checkbox" name="top_nav" id="rwd_top_nav">
					<label for="rwd_top_nav" class="rwd_button hide_on_desk hide_on_tablet show_on_mobile">
						<span class="entypo-menu"></span>
					</label>
					<div class="menu"><ul><li class="page_item page-item-4 current_page_item"><a href="http://localhost:8080/">Homepage</a></li><li class="page_item page-item-12"><a href="http://localhost:8080/nieuws/">Nieuws</a></li><li class="page_item page-item-2"><a href="http://localhost:8080/sample-page/">Sample Page</a></li><li class="page_item page-item-10"><a href="http://localhost:8080/test/">Test</a></li></ul></div>
				</div>

Responsive-Navigation-(CSS-only).markdown

Responsive Navigation (CSS only)

A Pen by Raymon Schouwenaar on CodePen.

License.

style.css

/* Handles icon fonts */
@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

#rwd_top_nav {
	display: none;
}

	.rwd_button {
		width: 100%;
		display: block;
		text-align: left;
		padding: 5px 12px;
		cursor: pointer;
	}
	.rwd_button span {
		font-size: 30px;
    color: white;
	}

	
#rwd_top_nav:checked ~ .menu {
  display: block !important;
  opacity: 1;
} 
.menu {
  display: none;
}

#top_nav {
  width: 100%;
	height: auto;
	background-color: #373737;
  position: relative;
  float: left;
}
#top_nav ul {
	width: 100%;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	float: left;
}
#top_nav li {
	width: 100%;
	line-height: 70px;
	float: left;
	display: inline-block;
	border-bottom: 1px solid #fff;
}
#top_nav li a {
	display: block;
	padding: 0 30px;
	font-size: 0.9rem;
	color: #fff;
	text-decoration: none;
	transition: 0.6s ease;
	font-weight: 700;
}
#top_nav li:hover a,
#top_nav li:focus a,
#top_nav li.current_page_item a {
	background-color: #ccc;
	color: #000;
}