How to make a fixed sidebar in CSS

Keywords

Definition

In this tutorial, I will show you how to make a fixed sidebar in a div, which you can apply on your website easily, by using CSS. Web sidebars summarize the whole website content or the topic for users and therefore might come in handy for your website although you are not familiar with them.

Usage⁽¹⁾

In computing, a sidebar is a user interface element that displays a list of choices. It typically appears as a column to the left of the main content, though it can appear on the right side as well.

Both Windows and Mac OS X desktop windows include a sidebar by default. This column, which appears on the left side of each open window contains links to common folders, such as the Documents, Music, Pictures, and Downloads folders. It provides easy access to common locations on your computer, no matter what directory you are currently viewing.

Websites often use sidebars for navigation purposes. These sidebars typically contain links to the main sections of a website. If the sidebar is part of the website template, it provides easy access to any section of the website no matter what page you are viewing. When the primary navigation of a website is located in a sidebar, it may also be called a navigation bar.

Code

Create the sidebar and the container.

Use ‘position:fixed;’ property to position the sidebar relative to the viewport.

Use ‘position:absolute;’ property to position the container depending on the viewport width and height as percentages.

For the mobile version, use the media tag to modify declarations.


/* ----------- CSS ------------ */

.sidebar{position:fixed;top:0;left:0;width:20%;height:100%;background-color:#E53238;padding-top:30px;}
.container{position:absolute;top:0;right:0;width:80%;height:auto;background-color:white;}
.sidebar button{display:block;width:80%;margin:auto;background-color:#0064D2;border:none;border-radius:50px;font-size:25px;color:#F5AF02;cursor:pointer;}
.sidebar button:hover{background-color:#86B817;color:white;transition:1s;}
.container p{color:black;font-size:20px;}

@media only screen and (max-width: 800px) {
.sidebar{width:40%;}
.container{width:60%;}
.sidebar button{width:70%;font-size:15px;}
}

/* ----------- HTML ------------ */

<div class="sidebar">
<button>Home</button><br>
<button>About</button><br>
<button>Writers</button><br>
<button>Subjects</button><br>
<button>News</button><br>
</div>
<div class="container">
<p></p>
<p></p>
</div>



Result:

References

⁽¹⁾ Christensson, Per. "Sidebar Definition." TechTerms. Sharpened Productions, 26 July 2011. Web. 09 March 2019. <https://techterms.com/definition/sidebar>.