Create a Fixed Sidebar using HTML and CSS

Last Updated : 04 Dec, 2023

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. In this article, we will create a fixed sidebar using HTML and CSS.

HTML is used to create 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:

fixed-sidebar

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>