How to Create a Fixed Sidebar Using CSS

Introduction

A fixed sidebar is a commonly used design element in modern web layouts. It remains in a fixed position as the user scrolls through the content, ensuring easy access to navigation links or important information. This is especially useful in dashboards, blogs, or content-heavy websites where quick navigation is important.

In this step-by-step tutorial, you’ll learn how to create a fixed sidebar using CSS. We'll guide you through building the HTML structure, applying the CSS to make the sidebar fixed, and making it responsive for different screen sizes.

Development Steps

Create the HTML Structure for the Sidebar: Set up the basic HTML structure for the sidebar.
Apply Styling for the Sidebar: Style the sidebar to give it a fixed position, background color, and width.
Add Content for the Main Area: Create the main content area next to the sidebar.
Make the Layout Responsive: Adjust the sidebar and main content layout for smaller screen sizes.

Step 1: Create the HTML Structure

Begin by creating the HTML structure. This includes a div for the fixed sidebar and another div for the main content area.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Sidebar Example</title>
</head>
<body>

    <!-- Step 1: Create the sidebar structure -->
    <div class="sidebar">
        <h2>Sidebar</h2>
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>

    <!-- Main content area -->
    <div class="content">
        <h1>Main Content</h1>
        <p>This is the main content section. The sidebar remains fixed on the left as you scroll down.</p>
    </div>

</body>
</html>

Explanation:

The div with the class sidebar will hold the navigation links.
The div with the class content will hold the main content of the page.

Next, style the sidebar to give it a fixed position on the left side of the screen. We'll define its width, background color, and make sure it remains fixed as the user scrolls.

/* Sidebar styling */
.sidebar {
    position: fixed;  /* Fixes the sidebar in place */
    top: 0;  /* Aligns the sidebar to the top */
    left: 0;  /* Aligns the sidebar to the left */
    width: 250px;  /* Sidebar width */
    height: 100vh;  /* Full height of the viewport */
    background-color: #333;  /* Dark background */
    color: white;  /* White text color */
    padding: 20px;  /* Padding inside the sidebar */
    box-sizing: border-box;  /* Ensures padding is included in the width */
}

/* Sidebar link styles */
.sidebar a {
    color: white;  /* White text for links */
    text-decoration: none;  /* Removes underline */
    display: block;  /* Makes links appear in block format */
    padding: 10px 0;  /* Adds padding for each link */
}

.sidebar a:hover {
    background-color: #575757;  /* Darken background on hover */
}

Explanation:

position: fixed;: Ensures the sidebar stays fixed on the left of the viewport even when the user scrolls.
width: 250px;: Sets the width of the sidebar.
height: 100vh;: Ensures the sidebar takes up the full height of the viewport.
padding: 20px;: Adds space inside the sidebar to separate the text from the edges.
box-sizing: border-box;: Ensures the padding is included within the sidebar's width.

Step 3: Add Content for the Main Area

Now, style the main content area so it sits next to the sidebar. We will use margin-left to push the content area to the right, leaving space for the sidebar.

/* Main content styling */
.content {
    margin-left: 250px;  /* Leaves space for the sidebar */
    padding: 20px;  /* Adds padding inside the content */
}

Explanation:

margin-left: 250px;: Adds a left margin equal to the sidebar’s width so the main content does not overlap with the sidebar.
padding: 20px;: Adds space around the content inside the content area.

Step 4: Make the Layout Responsive

To make the layout responsive, we can hide or collapse the sidebar on smaller screens like mobile devices. You can use media queries to adjust the layout.

@media (max-width: 768px) {
    .sidebar {
        width: 100%;  /* Sidebar takes up full width on smaller screens */
        height: auto;  /* Adjust height based on content */
        position: relative;  /* Sidebar moves to a relative position */
    }

    .content {
        margin-left: 0;  /* Remove margin so content takes full width */
    }
}

Explanation:

width: 100%;: The sidebar takes up the full width of the screen on mobile devices.
position: relative;: The sidebar moves to a relative position so it no longer remains fixed on smaller screens.
margin-left: 0;: Removes the left margin, allowing the content to take the full width of the screen.

Complete Code

Here is the complete code for creating a fixed sidebar with a responsive layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Sidebar Example</title>
    <style>
        /* Sidebar styling */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 250px;
            height: 100vh;
            background-color: #333;
            color: white;
            padding: 20px;
            box-sizing: border-box;
        }

        /* Sidebar link styles */
        .sidebar a {
            color: white;
            text-decoration: none;
            display: block;
            padding: 10px 0;
        }

        .sidebar a:hover {
            background-color: #575757;
        }

        /* Main content styling */
        .content {
            margin-left: 250px;
            padding: 20px;
        }

        /* Responsive design for mobile devices */
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
            }

            .content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>

    <!-- Fixed Sidebar -->
    <div class="sidebar">
        <h2>Sidebar</h2>
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>

    <!-- Main content area -->
    <div class="content">
        <h1>Main Content</h1>
        <p>This is the main content section. The sidebar remains fixed on the left as you scroll down.</p>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to create a fixed sidebar using CSS. The sidebar stays fixed on the left side of the screen while the user scrolls through the content. Additionally, the layout is responsive, ensuring that the sidebar adapts to smaller screens by becoming full-width and non-fixed. This approach is ideal for dashboards, blogs, or websites where navigation is important.

Java Guides

Search This Blog