Design Trend: Sticky Headers and Navigation Menus

Today we’ll take a look at a trend that you have probably noticed, websites using sticky or fixed position headers. When a visitors scrolls down the header will remain in view at the top of the browser rather than moving out of view at the top of the screen. The sticky header can help to make it easier for visitors to navigate through a site as they can quickly access the navigation menu rather than having to scroll back to the top of the page.

Here we will showcase 25 different websites that are making use of sticky headers. The screenshots show the headers as they appear after scrolling down. Visit any of the example sites to see them in action.

Pixel2HTML

Pixel2HTML

De Vetpan

De Vetpan

Kerem Suer

Kerem Suer

Tweed Barbers

Tweed Barbers

Sweez

Sweez

Loft City Church

Loft City Church

Carrera

Carrera

Nosh

Nosh

Digitalworx

Digitalworx

Jumpbox Design

Jumpbox Design

With

With

I Shot Him

I Shot Him

Seed Spot

Seed Spot

Grain and Mortar

Grain and Mortar

Manos

Manos

Daniel Filler

Daniel Filler

Heathlife

Heathlife

Nic Brunson

Nic Brunson

Norther Pixels

Norther Pixels

Switch

Switch

Milk & Pixels

Milk & Pixels

Teamgeek

Teamgeek

Grooveshark

Grooveshark

Tony Headrick

Tony Headrick

Studio NEC

Studio NEC

Published June 14th, 2013 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

4 Responses

Comments are now closed on this post.

  • Chris Gayle, June 16, 2013

    I like your post, article is amazing…:)

  • Rachel, June 17, 2013

    Ahhh… just what I needed for my research. It’s hard to find the sticky header sites. Thanks!

  • KatyPeterson, June 17, 2013

    Thanks for the post De Vetpan seriously its look amazing! Great collection……

  • jhochgreve, June 25, 2013

    Great list! Something like this is easy to underestimate, but we have seen lower bounce rate and longer total on site times just by using these!