Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Raymon Schouwenaar.
<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>
/* 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.