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:

Create an Icon Bar using HTML and CSS

vkash8574

Improve

Article Tags :

Create a Fixed Sidebar using HTML and CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?