63 lines
1.2 KiB
CSS
63 lines
1.2 KiB
CSS
/* The side navigation menu */
|
|
nav {
|
|
margin: 0;
|
|
padding-top:0;
|
|
padding-right:5px;
|
|
width: auto;
|
|
background-color: #f1f1f1;
|
|
position: fixed;
|
|
height: 100%;
|
|
overflow: auto;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
/* Sidebar links */
|
|
nav a {
|
|
display: block;
|
|
/*color: green;*/
|
|
padding: 1px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Active/current link */
|
|
nav a.active {
|
|
background-color: #04AA6D;
|
|
color: white;
|
|
}
|
|
|
|
/* Links on mouse-over */
|
|
nav a:hover:not(.active) {
|
|
background-color: #555;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
|
|
div.content {
|
|
margin-left: 200px;
|
|
padding: 1px 16px;
|
|
height: 1000px;
|
|
}
|
|
|
|
/* On screens that are less than 700px wide, make the sidebar into a topbar */
|
|
@media screen and (max-width: 700px) {
|
|
nav {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
background-color: transparent;
|
|
}
|
|
nav a {float: left;}
|
|
div.content {margin-left: 0;}
|
|
}
|
|
|
|
/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
|
|
@media screen and (max-width: 400px) {
|
|
nav a {
|
|
text-align: left;
|
|
float: none;
|
|
}
|
|
}
|
|
|