<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<h1>Full-height Fixed Vertical Navbar</h1>
<p>Create a full-height, "sticky" side navigation<p>
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 0px;
text-decoration: none;
text-align: center;
}
/* Change the link color on hover */
li a:hover:not(.active) {
background-color: #555;
color: white;
}
li a.active {
background-color: #4CAF50;
color: white;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.