When it comes to website headers and navigation bars, some essentials are important to consider:
1. Keep it simple and clear.
Remember the web design bestseller “Don’t make me think!”
2. Don’t clutter, only display essential information.
Drop-down or Mega menus showing categories on roll-over is an option.
3. For horizontal headers, limit the height:
Your site will be viewed on laptops with max 600px height as well as large screens. Consider that some people have unnecessary search bars that reduce the space even more.
Essential information should be displayed “above the fold” – meaning without having to scroll.
This limits the horizontal header and navigation to about 150 px, better less.
Modern sites manage with 100 px – condensed navigation, with the logo on the left and navigation to the right.
4. Collapse the header on scroll.
This way the navigation will always be visible.
5. Depending on your audience, use a classic or modern style.
We refer to classic as navigation points in one line or column, modern as “burger” or “overlay” menu.
Classic Navigation on Small Laptop
Classic Navigation on Standard Laptop
Classic Navigation on Desktop