25 Web Designs With Clever Fixed Header Effects

Read the full post

Web Designers are continuously managing to come up with cool effects from the basic CSS properties available to us. This post showcases some clever uses of CSS to create interested header effects. Some simply fix the header in place at the top of the screen, others collapse the header as the user scrolls and a few exhibit some super cool animated effects that rearrange the header content. Check out each one and give your mouse a stroke to see each effect come to life.


View the website

I Shot Him

View the website

Playground Inc.

View the website

Red Antler

View the website


View the website

Seed Spot

View the website

Grain & Mortar

View the website


View the website


View the website


View the website


View the website

Daniel Filler

View the website

Something Splendid

View the website

Rockaway Relief

View the website

By Association Only

View the website

Kiawah Island Real Estate

View the website

Always Creative

View the website

Engage Interactive

View the website

Steve Zeidner

View the website

Jet Cooper

View the website


View the website


View the website

Kait Bos

View the website


View the website

Colin Grist

View the website

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.


  1. I added a more compact header once the the user gets past the main image to increase screen space. Fits in very well with the examples here

  2. Giancarlo says:

    Awesome list! And as a Torontonian I love how you've included 3 Toronto based design agencies!

  3. Jonathan says:

    Hi Chris,

    a top design collection! Now, a how-to would be great.

    Best regards!

  4. falz says:

    Awesome collection!
    Now I have a nice inspiration for another project. =)

  5. Samo says:

    The best is IE Mode from I Shot Him.

  6. I Loved header Design of "Seed Spot". It looks great. We can use such type of header in all types of Websites such as we can use it for Professional pourpose.

  7. cateca says:

    These are awesome! I love how inspiring they are too. My favourite is Manos – simple and effective.

  8. Awesome collection..gonna follow it!!!!

  9. Great designs and header effects too!! Love it!!

  10. Alan says:

    Thanks for providing valuable information.Your Articles regarding "25 Web Designs With Clever Fixed Header Effects" really rocks.Your Articles are much more informative than any other site.

  11. Liam says:

    clever uses of CSS to create interested header effects, great, thanks for share!

  12. Web design says:

    Professional web design experts know the value of an exceptional website and the importance in using that website to cater to today’s digitally driven customer. For this reason, more and more small businesses that want to compete in the already challenging marketplace are reaching out to professional web designers to help with their online presence.

  13. really great designs… thank you for alot all of them

  14. drone says:

    Nice one chris, I should try this someday.

  15. Neil says:

    Great roundup chris! More then a few canadian websites in this list, its nice to see!

  16. Hi Chris,

    I must confess that these collections really kept me wowed! I have been designing sites for over four years now and I have not seen anything like these. I have not seen these type of header animation effect.

    Thanks for pointing these to me. I will have to implement some of the skills learnt in my next design. I promise I will let you know.

    Thanks Chris

  17. iwrahost says:

    fine, it is really good site to learn about designing. This post is so much helpful for me to create interesting header effects using CSS. I think this post will be so much useful for all newbies and developers.

  18. softcorp says:

    The initial development of responsive web design takes more time. It is usually much easier to create RWD from scratch than to convert an existing site.

  19. Demovik says:

    Really nice collection of colourful website designs!

  20. Web Designers are continuously managing to come up with cool effects related to <a href="http://www.randomsoftsolution">web design</a>from the basic CSS properties available to us.

  21. Web Designers are continuously managing to come up with cool effects related to <a href=""&gt;
    web design</a>from the basic CSS properties available to us.

  22. thanks the web designs with clever fixed the designs.
    <a link href=""&gt; 3D Animation|Web Designing Courses In Chandigarh</a>

  23. pink08 says:

    Really nice collection of colourful website designs! You could try for more things to help you to become a webmaster

  24. Interesting. Its really amazing how web designing works.

  25. Jared says:

    Really love the design for Manos site.

Sorry, comments are now closed