b2cloud

20th October 2011

Web Design Trend: Sticky Navs

Reviews | Thoughts By 5 years ago

A web design trend that I have started noticing more frequently are ‘sticky menus’ where the navigation sticks to part of the page while the content scrolls. This great feature for websites with lots of scrolling and allows users to easily navigate from page to page without having to scroll back to the top to get to another section.

We have see this done at the top of the page for a while now, and its starting to become more common in left hand side of a page. However an advancement on this which I have seen, which has the extra ‘wow’ factor, is to have the navigation not at the top initially but as you scroll down it catches on the top of the browser and sticks there.

Trend Samples

Here are some sample sites with a great use of sticky navs:

Facebook.comTop sticking
A simple but effective with blue panel sticking to the top of the page as you scroll.


Teean + Lax BlogLeft side sticking & collapsible
The nav sticks to the left of the page as you scroll with the added benefit of being able to collapse the nav if its in your way.


The LoungeTop stick & single page

This takes to stick to top menu but is a single paged design. As you scroll the current section is highlighted in the nav – a great feature.


Tabspresso Top Stick with fade in
A nice touch here, the top nav isn’t shown initially but as soon as you start scrolling it fades in.


LESS CSSCatch & Stick Style
Here the nav bar appears below the main logo and then as you scroll down it catches on the top of the page applies some transparency.

Recommended Posts

Subtle iOS 7 and 8 design que?

Post by 5 years ago

Looking at some of the invisible shapes certain parts of iOS outline, I thought about this: Is it implying an arrow?

Got an idea?

We help entrepreneurs, organizations and established brands from around
the country bring ideas to life. We would love to hear from you!