Please, enter a valid email!

Web Designs with Fixed Header. No Glue Was Used

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.

So, fix your attention on these trendy designs.

***

Escape Flight

Web Designs with Fixed Header
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.

***

Jaquet Droz

Web Designs with Fixed Header
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.

***

Engage Interactive

Web Designs with Fixed Header
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.

***

Ditto

Web Designs with Fixed Header
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

Web Designs with Fixed Header
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

Web Designs with Fixed Header
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

Web Designs with Fixed Header
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

Web Designs with Fixed Header
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

Web Designs with Fixed Header
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.

***
La Grange

Web Designs with Fixed Header
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

Web Designs with Fixed Header

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

Web Designs with Fixed Header
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.

***

Orange History

Web Designs with Fixed Header
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.

***

Prettybird

Web Designs with Fixed Header
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.

***

Stereo Creative

Web Designs with Fixed Header
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

Web Designs with Fixed Header
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.

***

Umbruch

Web Designs with Fixed Header
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.

***

Both Associates

Web Designs with Fixed Header

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.

***

Curt's Special Recipe

Web Designs with Fixed Header

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.


Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.


Katarina Klementi

Katarina is a content writer, one of those who create all-that-inspirational sometimes technical posts for TemplateMonster blog.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

One response to “Web Designs with Fixed Header. No Glue Was Used”

  1. Richard Skeats says:

    Just reading your article about fixed element and I got distracted by a fixed element lacking controls to hide or toggle it on/off so I blocked the element:
    templatemonster.com##.header-container_wrap.container

    Much better now.
    Sorry but I don’t like things stuck to my screen area that I can’t close or toggle on/off as it is distracting.

    “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.”

    But I may not want it there. Just because it is easy it doesn’t mean the user should be denied a choice over their screen area. Some find it distracting.

    “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.

    So, fix your attention on these trendy designs.”

    Fix your attention of fixing the bars. Attention seeking bars. Now that says it all. I come here to read the article not be bothered by something that, restrict the screen area of the contents and serve as a distraction and denies my a choice over my screen area reserved for scrolling. If it is there to do that it is no different to what use to be found in aggressive advertising banners back 10 years ago and the spammy things that use to get fixed on the page that don’t belong there.

    If they are on the side and covering up contents I can tolerate but if they span across at the top and cover up contents without a close button just no way. I will block it or it will drive me away.

    Nothing wrong in wanting my screen area free of things stuck there like before this trend.

Leave a Reply

Your email address will not be published. Required fields are marked *