How to make fixed side bar html,css only.

Pushpa Raj Dangi August 02, 2019

How to make fixed sidebar HTML, CSS only.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: sans-serif;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #4a2d72;
overflow-x: hidden;
padding-top: 20px;
}

.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #d4b8b8;
display: block;
}
.sidenav a:hover {
color: #df9393;
}
.main {
margin-left: 160px;
/* Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}

@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Sidebar</h2>
<p>This sidebar.</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores voluptatibus necessitatibus eaque
dolorum molestias! Ducimus ipsam doloremque, culpa dolorem, quisquam sunt nesciunt quibusdam est quia sint
omnis quo ab aliquid!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ipsam quo, reprehenderit eos, neque
similique id quae corporis, quas sint ex assumenda hic maiores a harum. Quis doloremque ipsam a!
</p>

<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est doloribus suscipit modi fuga magnam tenetur ex
omnis possimus ducimus fugit maxime, dolorem officiis et optio placeat, alias iusto eos ipsa.
</p>
</div>
</body>
</html>

Reactions

Post a Comment

0 Comments

If you have any question please ask?