Innovative Navigation Techniques to Save You Header Space

The header is an important part of a website. It usually has the logo, navigation, login, sign up and search. Making room for all these elements in your header is no easy task. The last thing you want to do is cram everything together and give your users a cluttered navigation. You also don’t want to dedicate too much space to your header otherwise you’ll show too little content above the fold. What you want to do is dedicate a small amount of space to your header, and use that space efficiently to display your interface. Here are a few innovative navigation techniques that can help make that happen.

Elastic Search Bar

For large sites, a search bar in the header is necessary to have. But placing it inside your navigation bar is a tight squeeze if you have a lot of links there. This is where an elastic search bar works best. An elastic search bar displays the text field in a thin, manageable size, and expands when the user clicks on it to type in their search term. The navigation links squeeze together to make room for the wider text field. This approach not only gives users enough padding to click on the navigation links, but it also gives them enough text space to enter their search term when they need.

• jQuery Smooth Animated Search Field Freebie

Unified Login/Sign Up Button

Logging and signing up are actions that users will need to do from the header of your site. But there’s no reason that your login and sign up buttons should take up a large amount of space. This can happen if you use a separate button for each action. A way to save space is to unify the login and sign up buttons into one, and visually separate the two different actions with a vertical line. An added benefit to this approach is that it places the two actions in closer proximity to each other. So after users sign up, they’ll have no trouble finding the login.

Nav Bar Logo

A logo can give your site a unique and memorable identity. But you don’t have to make it big to do that. A big logo can take up a lot of header space and push a lot of content below the fold. When you scale the size of your logo to fit inside your navigation bar, you save header space and bring more content above the fold. Not only that, but you also allow your logo to act as the home button that takes users back to the home page. This means you’ll save even more space by not needing to add another home button to your navigation bar.

Hover Bar

A nav bar logo can do the job just fine, but some sites might want a big logo and tagline in their header for aesthetic purposes. Is it possible to have a big logo and tagline and save header space at the same time? With the hover bar it is. The hover bar displays the navigation bar when users hover their mouse over the header. When users hover their mouse off the header, the navigation bar disappears and the big logo and tagline appear. This approach lets you have your cake and eat it too.

• Hidden JQuery Drop Down Menu For Minimalist Design

Dropdown Logo Menu

If you really want to save header space, you can even go as far as shortening your navigation bar. When you arrange your navigation links horizontally, the navigation bar gets longer and longer. The more links you have, the less space you’ll have for your search bar and login/sign up buttons. However, if you use a dropdown logo menu, you can pack all of your navigation links in a menu under your logo to make room for your other header elements. The result is a short navigation bar that only takes up a small amount of space. Users can get to the menu, search bar or login/sign up buttons quickly and easily without experiencing any clutter or noise.

• Create Vimeo-like top navigation

Flyout Ribbon

What if you want the navigation bar to go away completely? There’s even an innovative technique for this. The flyout ribbon completely collapses the navigation bar into a tab on the right when the user clicks the disclosure arrow. To open the navigation bar back up, the user clicks the disclosure arrow again. This approach allows users to browse pages freely and openly without an obtrusive navigation bar in the their way.

This is the perfect add-on to persistent navigation bars that follow users as they scroll. Sometimes persistent navigation bars can come in handy. Other times you just want the navigation bar out of your sight. The flyout ribbon can make a persistent navigation bar disappear when you don’t want it, and reappear when you do.

• Flyout Ribbon using jQuery and CSS3

Fisheye Menu

There’s not a more elegant to save header space than to use icons with a fisheye menu. The fisheye menu is a beautiful way to save header space and show off your icons. As users move their mouse across the navigation, the icon they hover over enlarges so that they can not only see the item label, but also the graphical detail of the icon. Icons are generally an efficient way to save header space. But using icons with a fisheye menu allows you to save header space in style.

• “Outside the Box” Navigation with jQuery

Conclusion

Giant headers and messy navigations are found all over the web today. Don’t assume users want to spend most of their time in your header or navigation because they don’t. What drives them to your site is content. Minimize your header and maximize your content by using these innovative navigation techniques. Simplify your navigation bar and make it easy for users to find what they’re looking for. If you can do that, you’ll achieve what most websites struggle with.

With techniques as innovative as these, its important to test them on your users. That way you know what works well on your site and what doesn’t. The header is one of the hardest things to design. But with the right technique, some testing and tweaking you’ll come up with an elegant and efficient header in no time.

Book

Affiliate