11 Inspirational Fixed Position Menus

Alt Text

Introduction

Fixed positioning positions elements relative to the browser window itself instead of the page so when the page is scrolled down, the fixed element stays right where it is. This technique is often used on blogs where the pages are much longer. Creating a fixed position menu will keep the navigation near the viewer at all times to eliminate the inconvenience of scrolling all the way back up to find the navigation.

When using a fixed position navigation for your site, you must realize that not everyone’s browser height is going to be the same. Sometimes when the fixed navigation is too long for a browser, some of it will be cut off making it impossible for those viewers to reach parts of your navigation.

Here are some beautiful examples of fixed position navigation along with some tutorials on how to achieve this if you don’t know how to already.

Examples!

Tobias Ahlin

This blog uses fixed position menus for each different blog post, which starts sticking as you scroll with the post and stops sticking when you scroll past onto the next post. It is a great way to ensure that as readers scroll down to read a longer post, they can always see extra information about that certain post.

Julius Mattsson

This personal blog of Julius Mattson uses a beautiful fixed menu that blends in great with the style of the website. When the website is opened, it automatically smooth scrolls to the top of the first post which shows off the functionality of the fixed menu.

Rob Edwards

This circus styled portfolio uses a fixed menu that shows the major parts of this website, mainly the portfolio and the blog. It incorporates animated transitions between the different sections when clicked and smooth scrolls to the destination which gives the website a very slick and fluid feel.

Ryan Scherf

Ryan Scherf’s website uses a semi-transparent wood textured fixed menu, that contains website links along with all his social media accounts and contact info.

Web Designer Wall

This recent redesign of WebDesignerWall incorporates a beautiful fixed position menu. It contains all the important information including social media, navigation and a search bar. Everything is beautifully animated like the search bar that extends when you select it.

IconDock

This icon store uses a fixed position shopping cart in tandem with drag and drop capabilities to bring a very friendly way to shop for icons.

Fat Man Collective

This website uses an animated character to spice up the navigation. When buttons are clicked on the fixed navigation the “fat man” jumps and shakes the screen as it scrolls to the destination.

Sohtanaka

Sohtanaka uses fixed position in two instances. On the portfolio the different sections are shown in a fixed menu with changing testimonials of their work below them. Their blog posts also use fixed position to show social media options.

Dean J. Robinson

The fixed navigation keeps the reader always reminded what blog they’re on. It also has a nice faded gradient that gives the content underneath the blog logo a nice smooth fade when the reader scrolls down.

Mind Work 3D

Mind Work 3D uses a fixed navigation to mark the different categories of their site. These buttons are textured well to match the style of the site.

Carbon Tumblr Theme

David Appleyard’s site uses this premium tumblr theme. It uses a great fixed navigation that shows a logo, tagline, and social media accounts.

How To

DesignM.ag Sticky (Fixed) SideNav Layout with CSSView Demo
Jtricks Fixed & Sticky Menu