How to Create Fixed Full Height Sidebar Menu with CSS
Sidebar
How To, for Web Applications
By: Chrysanthus Date Published: 19 Mar 2025
A sidebar is a bar typically of a menu of hyperlinks, on the left of the main webpage content. The main webpage content is on the right. If the sidebar does not move as the main content is scrolled up and down, then the sidebar is said to be fixed. If the height of the sidebar is from the top of the page to the bottom of the page, then the sidebar is said to have full height. This tutorial explains How to Create Fixed Full Height Sidebar Menu with CSS. It is also possible to have a sidebar on the right of the main webpage content. However, this tutorial deals with the one on the left.
At the end of this tutorial, is the complete webpage code for the project. The reader should copy the code into a text editor. Save the file with any name, but having the extension, .html. Open the file in the browser. Scroll down and up, to appreciate the nature of fixed sidebar. The reader is advised to do that before continuing to read the rest of this tutorial.
Webpage Skeleton Code
The webpage skeleton code for which more useful code will be added for the project, is:
<!DOCTYPE html>
<html>
<head>
<title>Fixed Full Sidebar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>
Any professional webpage should have at least the first four HTML elements (tags) in the HTML head element. The HTML style element in the HTML head element will have all the styles for the hyperlinks, the hyperlinks' container, and other containers. The HTML script will be left empty. The body element will have the two divs: one in vertical format, for the hyperlinks, and the other for the main page content. Note: the code form for the hyperlink is the HTML anchor (a) element.
The HTML Body Element
The content of the body element is:
<!DOCTYPE html>
<html>
<head>
<title>Fixed Full Sidebar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>
The first div has the anchor elements (hyperlinks). It has the attribute, "class='sidenav'", where 'sidenav' will be used in a CSS selector to identify the CSS rule to style the div. The second div has the main content for the webpage. It has the attribute, "class='main'", where 'main' will be used in a CSS selector to identify the CSS rule to style this second div.
The Style Element
The style element has the styles (CSS rules) for the Body element, sidebar div, each anchor element in the sidebar div, and the main div.
The Body Style
The CSS rule for the body element is:
body {
font-family: "Lato", sans-serif;
}
If the browser does not have the font, "Lato", then the browser should use the font, sans-serif, which it likely has, for all the text in the body element.
Styles for the Fixed Sidebar
The CSS rule for the fixed sidebar is:
div.sidenav {
width: 160px;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
padding-top: 20px;
}
Since it is a sidebar, it has to have a small width. In this case, the width is 160px. The height of the sidebar is from the top of the page to the bottom of the page, hence the property, "height: 100%;". It must be fixed, and not move up and down with scrolling of the main div (main content). So it has the fixed position property. In practice, it is actually in front of the left margin of the main div. So its z-index value is 1, assuming that the z-index of the body element and the main div is 0. Its top end is 0px below the top of its container, which is the body element; and its left end is also 0px to the right of the left end of the body element; and hence the properties: "top: 0px;" and "left: 0px;" . The top, right, bottom and left properties have to be typed, after the position property has been typed, in the same CSS rule. The background color of this sidebar div is #111 (black but not the blackest black). The values of the four padding is 20px.
CSS Rule for the Hyperlinks
The code for a hyperlink is the anchor element (a) code. The CSS rule for the anchor elements in the sidebar div is:
div.sidenav a {
display: block;
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
}
By default, the anchor element is an inline element, meaning that if they are typed next to one another, they will appear in a horizontal line at the browser. Each anchor element here, is forced into a block-level element, so that when they are typed next to one another, they will appear one below the other at the browser. This is the main feature for a vertical navigation menu bar. When the mouse pointer is over an anchor element, there should be no underlining, hence the property, "text-decoration: none;" . The text color is #818181 to contrast with the background color, #111 of the div containing element. It is assumed at this point that the reader knows the rest of the CSS properties in the CSS rule.
Hyperlink On-hover
The CSS rule for this is:
div.sidenav a:hover {
color: #f1f1f1;
}
When the mouse pointer goes over an anchor element, the text color of the anchor element has to become #f1f1f1, which has to contrast with its former text color and the background color, #111 of the div containing element.
CSS Rule for the Main div Content
The CSS rule for the main div content is:
div.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
Notice that the left margin which has no content is 160px wide, which is the same as the width of the sidebar. This is because the sidebar has to be in front of it. Read through the code.
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Fixed Full Sidebar</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
body {
font-family: "Lato", sans-serif;
}
div.sidenav {
width: 160px;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
padding-top: 20px;
}
div.sidenav a {
display: block;
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
}
div.sidenav a:hover {
color: #f1f1f1;
}
div.main {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
</style>
<script type="text/javascript">
</script>
</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" style="padding-bottom:1000px;">
<h2>Sidebar</h2>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Scroll down the page to see the result.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
The reader should copy the code into a text editor. Save the file with any name, but having the extension, .html. Open the file in the browser. Scroll down and up, to appreciate the nature of fixed sidebar.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK