How to Create a Shrinking Header on Scroll Without JavaScript

Sticky headers are a way to shrink a website’s header without using JavaScript. The inner container contains all the header elements, such as the logo and the navigation. The outer container is in a way the actual header, while the only function of the parent element is to make the header taller.