Best sticky header example’s for your next projects

Written by csshint

In the modern web, Sticky headers seem to be very popular now. In the past few years, many designers have used the “sticky header” position feature in their main navigation or menu.

When user’s scroll down the page a bit, the header resizes smaller, and gets back bigger when you scroll back to the top. They allow the user to easily access the navigation without the need to scroll up each time they want to choose a different page or option.

so In this post we’ve have collected some good example of sticky header. you can use your next projects and feel free to dowload.

1.Sticky Nav Demo

A simple layout website for the sticky navigation bar made by danwarfel

See the Pen Sticky Nav Demo by danwarfel (@danwarfel) on CodePen.

Demo   download

2.Sticky navigation, switching active element

A navigation bar that will be fixed at top on scrolling and each element gets highlighted made by Michael Günther

See the Pen Sticky navigation, switching active element by Michael Günther (@Shiaso) on CodePen.

Demo   download

3.Sticky nav – demo from designmodo

This sticky nav is created by designmodo team

See the Pen Sticky nav – demo from designmodo by Mario Loncarek (@riogrande) on CodePen.

Demo   download

4.Sticky Nav Bar

This sticky nav is full width nav bar. as a use scrolls, the navigation will highlight the section a user is in, created by Chris Ota

See the Pen Sticky Nav Bar by Chris Ota (@chrisota) on CodePen.

Demo   download

5.Example: Sticky responsive topbar

A fully responsive, simple yet effective sticky header & navigation combination with hero image, created by Jordan Brauer.

See the Pen Example: Sticky responsive topbar by Jordan Brauer (@jordanbrauer) on CodePen.

Demo   download

6.Sticky Navigation Menu Visible On Scroll

Sticky Navigation Menu Visible On Scroll created by 4gray.

See the Pen Sticky Navigation Menu Visible On Scroll by 4gray (@4gray) on CodePen.

Demo   download

7.Sticky Navigation

This sticky nav is created by Fabian D.

See the Pen Sticky Navigation by Fabian D (@dnaibaf) on CodePen.

Demo   download

8.Sticky navigation sample

This sticky nav is very clean created by Alejandro Montañez.

See the Pen Sticky navigation sample by Alejandro Montañez (@codeams) on CodePen.

Demo   download

9.Sticky Navigation

i really like this sticky navigation created by White Wolf Wizard.

See the Pen Sticky Navigation by White Wolf Wizard (@WhiteWolfWizard) on CodePen.

Demo   download

10.Simple Sticky Header

just a simple sticky header using css3 and jquery created by Jason Ryan.

See the Pen Simple Sticky Header by Jason Ryan (@viablethought) on CodePen.

Demo   download

11.sticky header

This is another simple and clean sticky nav created by brigi.

See the Pen sticky header by brigi (@brigi_cs) on CodePen.

Demo   download

12.Sticky Header Visual Trick

This sticky nav is created by Michael.

See the Pen Sticky Header Visual Trick by Michael (@mintyfloss) on CodePen.

Demo   download

13.Sticky Header CSS Transition

fun example of sticky header utilizing some css3 transition created by Brady Sammons

See the Pen Sticky Header CSS Transition by Brady Sammons (@soulrider911) on CodePen.

Demo   download

14.Sticky Header with vanilla JS

This sticky nav is created by Abhishek Sachan.

See the Pen Sticky Header with vanilla JS by Abhishek Sachan (@abhisack) on CodePen.

Demo   download

15.Animated Fixed Header (Scroll Down)

This Animated Fixed Header (Scroll Down) created by Malith Hettiarachchi.

See the Pen Animated Fixed Header (Scroll Down) by Malith Hettiarachchi (@malZiiirA) on CodePen.

Demo   download

16.Fixed sticky header when scrolling

you can use this sticky for Blog post created by Juan Gallardo.

See the Pen Fixed sticky header when scrolling by Juan Gallardo (@JGallardo) on CodePen.

Demo   download

17.Search Box in Content Moves to Fixed Header

This sticky nav is created by Chris Coyier.

See the Pen Search Box in Content Moves to Fixed Header by Chris Coyier (@chriscoyier) on CodePen.

Demo   download

18.Fade in Sticky Navigation using animate.css

This sticky nav will faded when you scroll a bit created by Patrick Little.

See the Pen Fade in Sticky Navigation using animate.css by Patrick Little (@patricklittle) on CodePen.

Demo   download

19.“Resize & Fixed Header (shrinking header)”

This sticky nav is created by cppratikcp a bootstrap snippet user.


Demo   source

20.“Sticky nav”

This sticky nav is created by SANTANU CHOWDHURY.


Demo   source

21.On-Scroll Animated Header

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition. creted by Mary Lou.


Demo   Download

About the author


csshint is a web design and development blog that was originally created in 2016. we publishes articles and tutorials about the latest web trends, techniques. our team always dedicated to provide useful, inspiring and innovative content that is free of charge. you can follow us on:

Facebook and

Leave a Comment