Create a Fixed Sidebar using HTML and CSS
Last Updated :
02 Aug, 2024
A fixed sidebar (side navigation bar) is a common layout pattern where the sidebar remains fixed on the screen while the rest of the content scrolls. This article will create a fixed sidebar using HTML and CSS.
HTML creates the structure layout, and CSS applies styles to the elements. First, we create a container div element that contains two div's i.e. one is sidebar and another one is content. In the sidebar div, we put the fixed sidebar, and in the content div, we add the content that we want to display in the content area.
Example 1: Here, we create a fixed sidebar navigation menu of full height.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Create a Fixed Sidebar using HTML and CSS
</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.sidebar {
width: 200px;
height: 100vh;
background-color: #136a13;
color: #fff;
box-sizing: border-box;
position: fixed;
}
.content {
flex: 1;
padding: 20px;
box-sizing: border-box;
margin-left: 200px;
text-align: justify;
}
.sidebar a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px;
margin-bottom: 10px;
transition: background-color 0.3s;
}
/* Change background color on hover */
.sidebar a:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<!-- Sidebar -->
<div class="sidebar">
<a href="#home">Home</a>
<a href="#tutorials">Tutorials</a>
<a href="#courses">Courses</a>
<a href="#jobs">Jobs</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<!-- Main Content -->
<div class="content">
<div id="home">
<h1>GeeksforGeeks</h1>
<p>
GeeksforGeeks is a widely acclaimed online
platform that serves as a learning resource
for computer science and programming
enthusiasts. Established in 2009 by Sandeep
Jain, the platform has become a go-to destination
for students, professionals, and educators seeking
quality content related to computer science and
programming.
</p>
</div>
<div id="tutorials">
<h1>HTML</h1>
<p>
HTML stands for HyperText Markup Language. It
is used to design the web pages. With the help
of HTML, you can create a complete website
structure. HTML is the combination of Hypertext
and Markup language. Hypertext defines the link
between the web pages and markup language
defines the text document within the tag that
define the structure of web pages.
</p>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: Here, we create a fixed side navigation bar of auto height, i.e. the height of side navbar menu is based on menu items.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Create a Fixed Sidebar using HTML and CSS
</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.sidebar {
width: 200px;
background-color: #136a13;
color: #fff;
box-sizing: border-box;
position: fixed;
}
.content {
flex: 1;
padding: 20px;
box-sizing: border-box;
margin-left: 200px;
text-align: justify;
}
.sidebar a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px;
}
.sidebar a:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<!-- Sidebar -->
<div class="sidebar">
<a href="#home">Home</a>
<a href="#tutorials">Tutorials</a>
<a href="#courses">Courses</a>
<a href="#jobs">Jobs</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<!-- Main Content -->
<div class="content">
<div id="home">
<h1>GeeksforGeeks</h1>
<p>
GeeksforGeeks is a widely acclaimed online
platform that serves as a learning resource
for computer science and programming
enthusiasts. Established in 2009 by Sandeep
Jain, the platform has become a go-to destination
for students, professionals, and educators seeking
quality content related to computer science and
programming.
</p>
</div>
<div id="tutorials">
<h1>HTML</h1>
<p>
HTML stands for HyperText Markup Language. It
is used to design the web pages. With the help
of HTML, you can create a complete website
structure. HTML is the combination of Hypertext
and Markup language. Hypertext defines the link
between the web pages and markup language
defines the text document within the tag that
define the structure of web pages.
</p>
</div>
</div>
</div>
</body>
</html>
Output:
Similar Reads
Create an Icon Bar using HTML and CSS This article provides a complete idea of how to create an Icon Bar using HTML and CSS. HTML is used to design the structure, and CSS applies styles to the elements to make the user interface (UI) attractive. To add the Icons, we use the Font Awesome icons CDN link in the head section, and add the ic
2 min read
Sidebar Menu Using HTML and CSS In this sidebar menu in HTML and CSS article, we’ll cover how to create a sidebar menu using HTML and CSS. Whether you’re a beginner or an experienced web developer, this guide will provide you with the knowledge and skills to build a Responsive sidebar menu in HTML and CSS that improves usability a
2 min read
Create a Split layout template using HTML and CSS In this article, we will design a Split Layout Template that provides a responsive HTML and CSS webpage layout with a split-screen design, accommodating content in distinct left and right sections. The layout adapts to different screen sizes and features contrasting colors and subtle hover effects f
2 min read
How to create a revealing sidebar using HTML CSS and JavaScript? A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and
3 min read
How to Create Responsive Sidebar using HTML & CSS ? Creating a responsive sidebar using HTML and CSS means designing a navigation menu that adapts seamlessly to different screen sizes. It provides a user-friendly experience on both desktop and mobile devices, adjusting its layout for better readability and easy access to content. PreviewApproachBasic
2 min read