Sticky Sidebar

Enhance user experience on your website with a sticky sidebar. Learn how to implement a sidebar that remains fixed while users scroll, providing convenient access to navigation options and content.

Enhance your website's user experience with a sticky sidebar that remains visible as users scroll. This guide will walk you through creating a sticky sidebar using HTML and CSS, allowing easy navigation and access to important content. Follow these steps to implement and customize the sidebar to match your website's design and functionality:

Step 1: Copy the Code Snippet

  • Start by copying the HTML and CSS code snippet below. This snippet includes the structure and styles for the sticky sidebar. Select the code, copy it, and paste it into your respective HTML and CSS files.

Step 2: Link CSS Files

  • Ensure the CSS file and Google Material Symbols font are correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles: 
    <link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">

Step 3: Customize and Make it Yours

  • Personalize the sticky sidebar to suit your website's layout and design preferences. Adjust the CSS styles for the sidebar (sidebar class) and main content (main-content class) as needed. You can modify the sidebar's width, background color, positioning (top value for stickiness), and content to fit seamlessly into your website.

By following these steps, you can implement a sticky sidebar using HTML and CSS, enhancing navigation and usability on your website. Customize the sidebar's appearance and functionality to create a unique and effective user experience for your visitors.

Code Explanation

HTML Code

Fonts Import
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
  • This <link> tag imports a Google Font stylesheet for "Material Symbols Outlined". It specifies various font properties like optical size (opsz), weight (wght), fill (FILL), and gradient (GRAD).
Navigation Bar
<nav>
  <span class="material-symbols-outlined"> menu </span>
  Dashboard
  <div>
    <span class="material-symbols-outlined"> search </span>
    <span class="material-symbols-outlined"> settings </span>
    <span class="material-symbols-outlined"> apps </span>
    <span class="material-symbols-outlined"> account_circle </span>
  </div>
</nav>
  • Structure:
    • Contains a span with the text "menu" and several navigation links/icons.
    • The <div> contains multiple <span> elements, each with a different material symbol icon (search, settings, apps, account_circle).
Header
<header>Products</header>
  • Simply displays the text "Products" as a header.
Product Section with Filters
<section>
  <aside class="filters">
    <!-- Filters content -->
  </aside>
  <div class="grid">
    <!-- Product items with skeletons -->
  </div>
</section>
  • Filters (<aside>):
    • Contains a list of checkboxes for filtering products (e.g., Trainers, Tees, Jeans, Jackets, Socks).
  • Product Grid (<div class="grid">):
    • Displays a grid of product items (<div class="grid-item">).
    • Each item has two child <div> elements, placeholders (<div class="skeleton">) for loading animation or placeholders.

CSS Code

Global Styling
* {
  box-sizing: border-box;
}
  • Ensures that all elements on the page use the border-box model, where padding and border are included in the element's total width and height.
body {
  margin: 0;
  padding-top: 56px;
  font-family: "Inter Var";
  background: #3f2d96;
  color: #f9f9f9;
}
  • Resets margin and sets padding on top of the body to 56px, typically for a fixed navigation bar.
  • Sets the font family to "Inter Var", a variable font.
  • Defines a dark purple background color (#3f2d96) and light text color (#f9f9f9) for the body.
Navigation Bar Styling
nav {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  color: #f9f9f9;
  background: #6245e7;
}
nav span {
  color: #f9f9f9;
  font-size: 22px;
}
nav div {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
  • Creates a fixed-position navigation bar at the top of the viewport.
  • Uses flexbox (display: flex) to align items horizontally with a gap of 16px between them (gap: 16px).
  • Adds padding to the left and right of 20px (padding: 0 20px).
  • Sets the background color to a darker purple (#6245e7) with white text color (color: #f9f9f9).
  • The z-index: 2 ensures it appears above other content.
  • nav span styles the icons/text inside the navigation bar with a font size of 22px and white color.
Main Section and Header Styling
section {
  display: flex;
  background: #2b2a31;
  padding: 20px 0;
}
header {
  display: flex;
  align-items: center;
  height: 120px;
  margin: 0;
  padding: 0 20px;
  background: #3f2d96;
  font-weight: 400;
  color: #f9f9f9;
}
  • section styles a container with a dark background (#2b2a31) and vertical padding of 20px.
  • header styles a header element with a height of 120px, padding of 20px, and a dark purple background (#3f2d96).
  • The text color is white (color: #f9f9f9) and the font weight is set to 400.
Filters Sidebar Styling
.filters {
  position: sticky;
  z-index: 1;
  top: 76px;
  width: 160px;
  height: 100%;
  padding: 0 20px;
}
.filters h2 {
  color: #7d7a7a;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 10px;
}
.filters label {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  font-size: 14px;
}
.filters input {
  margin: 0;
  accent-color: #6245e7;
}
  • filters styles a sidebar with sticky positioning (position: sticky) starting from 76px from the top of the viewport (top: 76px).
  • The sidebar has a width of 160px, full height (height: 100%), and padding of 20px.
  • filters h2 styles headings inside the sidebar with a light gray color (#7d7a7a), font size of 14px, and font weight of 500.
  • filters label styles checkboxes with text inside the sidebar.
  • filters input adjusts the appearance of the checkbox with a specific accent color (#6245e7).
Product Grid Styling
.grid {
  flex: 1 1 auto;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 15vmax;
  padding-right: 20px;
}
.grid-item {
  padding: 20px;
  background: #3d3c46;
}
  • grid creates a responsive grid layout with:
    • display: grid for grid-based layout.
    • gap: 10px sets the gap between grid items.
    • grid-template-columns: repeat(3, 1fr) defines 3 equal columns.
    • grid-auto-rows: 15vmax sets the minimum row height based on viewport height.
    • padding-right: 20px adds padding to the right.
  • grid-item styles individual items within the grid with padding of 20px and a dark background (#3d3c46).