Trend Tuesday: Adding a Fixed Header to Your Website

Web Design | December 31st 2013

A great new web design feature is now available on the Wix editor: fixed website headers. By “fixed,” we don’t mean that anything was wrong with the header – only that it remains in a set placement at the top of the page, even when your site visitors are scrolling downwards.

Adding a fixed header to your website can improve the user experience and contribute to the site’s look. With Wix, you can implement this with a simple click in your header’s settings, but before we explain how to do it, let’s begin by exploring the benefits of this feature.

fixed header6

Why Is This a Trend?

You may not have noticed how many websites actually integrate fixed headers. In fact, one of this feature’s greatest advantages is that it feels so natural on the page, it won’t steal too much attention from your content.

The popularity of fixed headers has a lot to do with another trend that we previously discussed here on the Wix blog – long scrolling. See, when your homepage gets longer and longer, it becomes inconvenient to always scroll back up to use the navigation menu. By setting the header to have a fixed position – menu included – you allow your site visitors to browse freely, without moving upwards and downwards all the time. It just makes your website so much more comfortable!

Here are 3 examples we found around the web of particularly well designed sites using fixed headers:

Red Antler >>

Tuesday Trend: Adding a Fixed Header to Your Website

Fhoke >>

Tuesday Trend: Adding a Fixed Header to Your Website

Ryan Scherf >>

Tuesday Trend: Adding a Fixed Header to Your Website

Is a Fixed Header Good for Your Website?

Before you get that header fixed, here are a few scenarios that will help you decide whether this feature is right for your site. You may want a fixed header if:

  • Your website pages are relatively long and require a decent amount of scrolling in order to view all the content.
  • You have several pages, and your ultimate goal is to encourage the website visitors to view them all.
  • Your website represents a company, an organization or a brand, and you want to strengthen the branding by constantly displaying your logo at the top of users’ screens.
  • Your header design can stylistically complement any part of the page (it’s important that a fixed header looks good and feels natural even as your visitors scroll further and further down).

Here is a cool example by a clever Wix user, who attached Christmas decorations to the header.

Carnation Coquito >>

Tuesday Trend: Adding a Fixed Header to Your Website

How to Add Fixed Headers to Wix Websites

Now, this is the fun part. Setting your website’s header to be fixed is as easy as can be:

  • Make sure all the elements you want to set as fixed are grouped together in the header – logo, menu, website title, etc. To attach an element to your header just drag it to the top of the page and it will attach itself automatically.

Tuesday Trend: Adding a Fixed Header to Your Website

  • Click on the header to open the Settings window.
  • Check the “Fixed Position” check box.

Tuesday Trend: Adding a Fixed Header to Your Website

And that’s it! Your fixed header is all set.


Tagged with: . . .