<p>Page Laubheimer says that if you’re going to do a sticky header… </p> <p>Keep it small.Visually contrast it with the rest of the page.If it’s going to move, keep it minimal. (I’d say, respect prefers-reduced-motion.)Consider “partially persistent headers.” (Jemima Abu calls it a Smart Navbar.)Actually, maybe don’t even do it. </p> <p>I generally like the term “sticky” header, because it implies you should use position: sticky for them, which I think you should. It used to be done with position: fixed, but that was trickier to pull off since the header would move in-and-out of flow of the document. Using sticky positioning helps reserve that space automatically without JavaScript or magic numbers.<br /> Direct Link to Article — Permalink<br /> The post Sticky Headers: 5 Ways to Make Them Better appeared first on CSS-Tricks.<br /> You can support CSS-Tricks by being an MVP Supporter.</p>

Breakdown

Page Laubheimer says that if you’re going to do a sticky header…

Keep it small.Visually contrast it with the rest of the page.If it’s going to move, keep it minimal. (I’d say, respect prefers-reduced-motion.)Consider “partially persistent headers.” (Jemima Abu calls

Curated

Apr 23, 6:51 AM

Source

Tags

Tomorrow's news, today

AI-driven updates, curated by humans and hand-edited for the Prototypr community