How to Create Responsive Sidebar using HTML & CSS ?

Last Updated : 09 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Creating a responsive sidebar using HTML and CSS means designing a navigation menu that adapts seamlessly to different screen sizes. It provides a user-friendly experience on both desktop and mobile devices, adjusting its layout for better readability and easy access to content.

a
Preview

Approach

  • Basic Structure Setup: Create a fixed sidebar .container with links, and a .content section for the main content.
  • Link Styling: Style the links with padding, color, and hover effects for visual differentiation and interactivity.
  • Responsive Design: Use media queries to adapt the sidebar and content layout for different screen widths (500px and 300px).
  • Sidebar Background and Gradient: Set the sidebar background color and use a gradient for the page background for visual appeal.
  • Adjust Layout for Small Screens: Change sidebar positioning and content alignment to ensure a responsive, user-friendly design on smaller devices.

Example: The example shows the implementation of the above-explained approach.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <!--link the css file using link tag-->
    <link rel="stylesheet"
          href="style.css">
</head>

<body>
    <div class="container">
        <!--container class will contain the links-->
        <a href="#" class="active">Home</a>
        <a href="#">Tutorials</a>
        <a href="#">Competations</a>
        <a href="#">Achievements</a>
    </div>
    <div class="content">
        <!--write the content you want inside.-->
        <h1>Responsive Sidebar</h1>
        <p>write the content here</p>
    </div>
</body>

</html>
CSS 
* {
    border: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
}

body {
    background: linear-gradient(to left, rgb(238, 91, 91), rgb(8, 8, 44));
}

.container {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 250px;
    position: fixed;
    background-color: #000011;

    overflow: auto;
}

/*adding styles to links */
.container a {
    text-decoration: none;
    display: block;
    padding: 18px;
    color: #fff
}

.container a.active {
    background-color: #14a093;
}

.container>a:hover:not(.active) {
    background-color: #403b3b;
}

div.content {
    margin-left: 230px;
    padding: 40px 40px;
    height: 100vh;
}

@media screen and (max-width:500px) {
    .container {
        width: 100%;
        height: auto;
        position: relative;
    }

    .container a {
        float: left;
    }

    div.content {
        margin-left: 0;
        background-color: rgb(242, 242, 110);
    }
}

@media screen and (max-width:300px) {
    .container a {
        text-align: center;
        float: none;
    }
}

Output:


Next Article
How to create Responsive iFrames using CSS ?
author
pk471zeu2
Improve
Article Tags :

Similar Reads