Make a Sticky Header or Sidebar with CSS

What position: sticky does

The position: sticky property starts with relative positioning, then switches to fixed when you scroll past a set point.

How to set it up

1. Find your header or sidebar selector: Use browser dev tools (F12) to spot the CSS class or ID of the element you want to stick.
2. Add your CSS in WordPress:
   • Via Appearance > Customize > Additional CSS in the admin dashboard.
   • Directly in your theme’s style.css, ideally within a child theme.
3. Write the CSS:

   .your-header-class {
     position: sticky;
     top: 0;
     background-color: #fff;
     z-index: 100;
   }
   
   .your-sidebar-class {
     position: sticky;
     top: 20px;
   }

   • position: sticky; makes it stick.
   • top: 0; fixes a header at the viewport’s top; adjust (e.g., top: 20px;) to stick a bit lower.
   • background-color: #fff; (for headers) hides content underneath when sticking.
   • z-index: 100; (for headers) keeps it above other elements.

Things to watch

• The parent of your sticky element should not have overflow: hidden, overflow: auto, or overflow: scroll.
• You need at least one of top, right, bottom, or left for sticky to work.
• Other CSS or scripts can interfere. Try disabling extras if it doesn’t stick as expected.