Pin it! I don’t mean pressing the Pinterest button, but the header of a site. 2013 has turned such fixed headers into another trend.
You may have missed it before (because of its organic look paired with the intuitive navigation of sites where it is implemented), but it’s hard to pass it by now when the hype around sites with pinned header is so obvious. Along with the craziness about flat designs, video backgrounds, metro style and typographic boom, web designs with fixed header are on the pick of interest this year. If you haven’t decided yet whether you like this trend or not, here is the showcase that will make your opinion set.
What’s Fixed There?
In designs with fixed header the latter is pinned to the browser (I mean fixed positioning). This fixed area usually contains the set trio:
logo
navigation menu
contact info
You can also find there: search, login/registration from, some call to action buttons, sound control.
What Are Fixed Headers for?
They keep navigation of the site and key information (logo and contact) in sight, all the time. It allows visitors to have seamless access to the key navigation links and an easy way back to the index page. As you see, it is mostly about improving the user experience. Easy scrolling plus always-within-sight header facilitates visitors’ work with the site.
Who Will Benefit?
This technique is beneficial for both the site owners and users. The first ones get more from the visitors’ awareness about the brand (because logo is always visible), the latter ones work with a user-friendly site. Besides, the contact info, which is in sight all the time, welcomes the viewers to drop a line.
You can use the header to put whatever important information you need. This site opted for the airport information panel, additional blocks with drop down option and creative search form. While scrolling down you’ll certainly like the clear way of all trips subdivision into the main destinations presented in separate content blocks with hover effects.
This highly modern online shop makes use of a fixed header that contains additional options (see icons to the right). Hover over the magnifier icon, and you will see drop down menu offering advanced search, the link icon will guide you back to block dedicated to sharing options.
Full-width photo on background, large fonts, simple lines, well-structured content part with accent colors and, of course, transparent fixed menu bar (that changes its color while scrolling down) lead visitors’ attention to navigation and content quite naturally.
Apart from being highly usable and stylish, ditto.com has one feature that has brought it to this roundup, and that’s fixed header. The header with menu and cart will stay glue to top no matter how long you scroll. By the way, the header becomes semi-transparent so you can see products or other content parts going under it.
***
Pulco
There are some predictions that masonry layout is the upcoming trend of 2014. For today it’s widely used in all types of sites, and here is the example of its implementation in Pulco drink website. Notice tiny hamburger menu (its several layers remind a hamburger structure) that arranges all its items, thus giving extra space to the header.
***
Portraits with Carter Kustera
Flat designs are on the wave now. This site draws attention with its “flat” color scheme and neat fixed header in clean style.
***
Sa Barca DE Formentera
Yellow & motton blue colors make this site look modern and stylish. Popular fixed header technology allows seamless navigation around the site, keeping the viewers aware of the company brand.
***
Home on Earth
It frequently happens that fixed header goes in pair with infinite scrolling, like in this design. It’s fully justified, ‘cause offering the viewers to browse a long site, you should offer an opportunity to reach all its parts quickly and easily
***
Karma
Clean & clear, with large photography background, legible typography, easy on the eye colors and fixed header - this site seems to make several trends work for its visual effectiveness.
Top slider spiced up with parallax, large realistic icons with hover effect… What else could make this design cooler? Header in fixed position facilitates the navigation of the site, thus offering its viewers more comfortable surf around it.
***
Car.A.Mia
This website is created with prevailing coral color in design that is pretty attractive. But today colors are of the least interest for me. I’d like to point your attention to the fixed header that includes links to major site’s categories and a “What’s important for you” section.
***
Coloud Headphones
Coloud.com store can boast not only with really stylish color scheme and cool products, but with a design that really stands out. There are so many cool features that it will take much time to describe all of them. But let's focus only on the fixed header. No matter which page you will visit the header will stay with you, it gives a choice of headphones, shopping cart and most important links.
It’s a most common practice to use several sure-fire technologies in one design to push it against others. The site you see has chosen video background that is a hot trend today, extremely large typography, and fixed header for the ease of work with its content.
Huge typography, animation, full-width photos, and, of course, the fixed menu bar in the header are the focal points of the following website. Click the link to enjoy it.
This item is for all fans of flat trend. Stereo Creative site keeps with its best traditions. The layout is divided into colored sections that go one by one while you scroll down. The only element is fixed here, and it’s the header with logo and menu.
***
The Kings of Summer
The next design is a blend of cool elements that are able to turn a site into a noticeable one. Textured background, handwritten typography (the site name), masonry layout where photos alternate with blocks (the latter go with hover effect). While browsing, you’ll always see the menu bar that is in fixed position.
Simple, one-page, effective – it’s all about this design subdivided into content sections with sliders, featured blocks of various shapes, neatly arranged blocks of information. Oh, I have nearly forgotten – fixed bar in the top.
Visiting this site, you’ll not face continuous scrolling, ‘cause its content part offers wisely wrapped blocks (just click “+” to see more information). While surfing around the site, you’ll always see the header part that is fixed. Notice some tips (in the top) about the content part you’re working with.
Content is a king here. Even the background color is chosen to push the content part into the focus of attention. Wise division of blocks where you can find sliders, blocks that you need to hover over, featured parts with highly modern circular images make all the information readable. The fixed header plus back-to-top button facilitate the navigation.
***
I hope, you've enjoyed this showcase. If you know some other cool examples of web designs with fixed header, feel free to mention and tell about them in the comment section.
