How to make sticky sidebar scroll so that it doesn’t collide with the sticky header?

I’m new to WordPress and site building in general so bear with me. I have a sticky header, and I want a sticky sidebar on the side. The problem with this set up currently is that after scrolling, the sidebar only starts scrolling when it hits the top of the full page, not the bottom of the header. This causes the header and sidebar to collide and merge. I can stop this by giving the sidebar column block large upper padding, but then that causes it to not be level with the rest of the contents of the page when scrolled all the way to the top. Is there a way to fix this? I’m thinking that I can set when the sidebar begins to be sticky, so that it lines up with the bottom of the header. Is this possible?

Additionally, it appears my sidebar is appearing above the header, when it should be appearing below… how do I fix that?

1 Comment
  1. Yup, the sidebar can only “stick” to the top of its parent. It has no idea there’s a header there.

    Padding is a good solution. At the same padding to the contents too.


This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer