September 23, 2020

22 Examples of Fixed Position Navigation in Web Design

Navigation might be the most important aspect of a website. It allows users to move from page to page and to find the content we want them to see. So having a navigation that is unique and always in the same position can be a huge plus. For this article, we gathered a few examples of websites that decided to use fixed position navigation. From fixed menus to headers and side bars, you will see several inspiring examples of how to use fixed navigation.

Nizo

While every element moves, the iPhone is fixed.

Fixed Elements

Full Stop

Here the fixed element is the header.

Fixed Elements

teehan+lax

Fixed side bar.

Fixed Elements

Up on a Hill

While you scroll up and down or use the navigation menu, the ‘Up on a Hill’ is always there, at the same position.

Fixed Elements

Studio Chirpy

Another example of fixed header.

Fixed Elements

Imaginista

Here, while you browse content horizontally, header and side bar are fixed.

Fixed Elements

More than HTML5

The small header is always there, helping you to remember where you are while you browse the content.

Fixed Elements

Fat-Man Collective

Check out the content and be sure to have side bar and mascot with you all times 😉

Fixed Elements

Netontwerp

Check out the content while side bar remains still.

Fixed Elements

robedwards.org

Another good example of fixed side bar.

Fixed Elements

Ryan Scherf

Nice textured fixed menu.

Fixed Elements

Loysel’s Toy

Another example of a side bar that stick around while you browse the content.

Fixed Elements

Nudge

Beautiful fixed header.

Fixed Elements

Grow Media

Here you can scroll content around while background and header bar remain still.

Fixed Elements

Bullet PR

Fixed menu!

Fixed Elements

Academy

Also a beautiful and clean fixed header/menu.

Fixed Elements

StruckAxiom

Check out the content and be sure to have side bar and mascot with you all times 😉

Fixed Elements

Virgin Racing

Browse beautiful huge colorful pictures while the side bar stay still to help your navigation.

Fixed Elements

DKNG

Also an example of fixed header.

Fixed Elements

Rich Brown

Here the side bar/menu are fixed.You have the right side of the page to check out content while the left side stay still.

Fixed Elements

IGN

When you start scrolling down the menu bar will move to the top and of the page and will remain there while you check everything else.

Fixed Elements

Source:

The Best Designs
DesignBombs

Share

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr