Skip to content

Shrinking Nav on Scroll – It’s a Kind of Magic

One can say that I am an observer. I look at a lot of “things.”  One thing that I have been noticing on websites are navigation bars resizing on scroll. It is like the next generation of what some people call “sticky” or fixed navigation. The nav is always present, even when scrolling down and so it saves the user the trouble of scrolling up too much once they’ve gone down.

So, what is the added bonus of making the nav shrink upon scroll like the sites listed below? Well, besides the obvious fact that sites are meant to be scrolled — the sticky nav takes care of that — it also addresses the idea that you need to make room for content. After all, content is king.

Here are some examples of sites that leverage this auto resizing technique.

Also, a good resource for designers and developers alike for this function is Codrops. They refer to this as an on-scroll animated header:

My Emma

One of my favorite examples of a shrinking nav is In general, Emma has a really fantastic brand sensibility. It is a really lovely UI and a wonderful site layout. Check out the nav on scroll. Good stuff, people.

Screen Shot 2013-12-30 at 4.02.27 PM

Before the page is scrolled (Credit:

Screen Shot 2013-12-30 at 4.02.49 PM

After scrolling (Credit:



Here is a blog site by the good people at Behance. This one not only resizes, but it also changes color to fade back more for the content to be highlighted.

Screen Shot 2013-12-30 at 8.29.07 PM before scroll (Credit:


Screen Shot 2013-12-30 at 8.29.25 PM after scroll (Credit:



IBM’s internal pages do this on scroll. I have to say that this isn’t my favorite example, but it is still solid nonetheless.

Screen Shot 2013-12-30 at 8.36.12 PM

IBM’s navigation before scroll (Credit:

Screen Shot 2013-12-30 at 8.36.34 PM

IBM’s mostly vacant navigation after scroll (Credit:


Another site and its changing nav that is worth noting is on While the nav doesn’t shrink or resize, it does change color and content. It goes from a universal nav to more of a social sharing nav bar. Changing from its predominantly blue palette to a white one helps it give way to the content. Then, it also changes to have social share buttons that are likely used a lot on their articles. They want to make sure that sharing is easy to find, so it makes sense to change the nav in this case. Good idea!

Screen Shot 2014-01-01 at 1.55.45 PM before scroll (Credit:

Screen Shot 2014-01-01 at 1.55.57 PM after scroll (Credit:

And here’s a different kind of magic to entertain you. Happy New Year!

Do you have a favorite example of a site that uses shrinking nav? Share it in the comments.



Tell us what you're thinking. Leave a comment.

There are no comments on this post.

Add a Comment

Fill in the form and submit it. Comments are moderated and may not appear to everyone immediately.