This content originally appeared on CSS-Tricks and was authored by Chris Coyier
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 it a Smart Navbar.)
- Actually, maybe don’t even do it.
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.
Direct Link to Article — Permalink
The post Sticky Headers: 5 Ways to Make Them Better appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2021-04-21T20:53:31+00:00) Sticky Headers: 5 Ways to Make Them Better. Retrieved from https://www.scien.cx/2021/04/21/sticky-headers-5-ways-to-make-them-better-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.