Skip to content

Instantly share code, notes, and snippets.

@cwake
Created March 5, 2017 01:53
Show Gist options
  • Save cwake/835c97887cf54fd2e1e655d8f8c4393c to your computer and use it in GitHub Desktop.
Save cwake/835c97887cf54fd2e1e655d8f8c4393c to your computer and use it in GitHub Desktop.
body {margin: 0;}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
font-family: "Lobster", serif;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #39c2c5;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 1050px){
ul.sidenav {
width:100%;
height:auto;
position:relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left:0;}
}
@media screen and (max-width: 400px){
ul.sidenav li a {
text-align: center;
float: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment