Add to HTML

 


Add to CSS


Complete code
<!DOCTYPE html>
<html>
<head>
<title>sticky navbar with css only</title>
</head>
<style type="text/css">
.main-container{

 border: 1px solid red;
}
.main-content{
border: 1px solid green;
}
.navbar{
border: 1px solid black;
height: 50px;
background-color: #28282b;
color: white;
position: sticky;
top: 0px;
z-index: 1;
}
.sidebar{
height: 1000px;
width: 30%;
border: 1px solid blue;
display: inline-block;
}
.page-content{
height: 1000px;
width: 69%;
border: 1px solid crimson;
display: inline-block;
}
.footer{
height: 50px;
background-color: #28282b;
color: white;
}
</style>
<body>
<div class="main-container">
Main Container
<div class="main-content">
Mainn-content
<div class="navbar">Navbar</div>
<div class="sidebar">sidebar</div>
<div class="page-content">page content</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>

Video Tutorial