{"id":10779,"date":"2022-09-07T10:08:57","date_gmt":"2022-09-07T03:08:57","guid":{"rendered":"https:\/\/rometheme.net\/?p=10779"},"modified":"2025-04-07T04:30:49","modified_gmt":"2025-04-07T04:30:49","slug":"what-should-a-website-header-include","status":"publish","type":"post","link":"https:\/\/rometheme.net\/blog\/design_inspiration\/what-should-a-website-header-include\/","title":{"rendered":"What Should a Website Header Include?"},"content":{"rendered":"\n

If you are going to create a header from a website, make sure the following elements are included.<\/p>\n\n\n\n

Logo<\/h5>\n\n\n\n

The logo design stands out beautifully from the rest of the header with its bright colors and high character. And because the logo is sized just right for the space, it doesn’t overwhelm other elements or force the header to take up excess white space.<\/p>\n\n\n\n

\"\"
–<\/figcaption><\/figure>\n\n\n\n
Navigation Links<\/h5>\n\n\n\n

Navigation should improve your visitor’s understanding of what’s on the site as well as how each page relates to one another. If they can easily get a glimpse of what’s going on, they’ll feel more confident when exploring what’s out there.<\/p>\n\n\n\n

Depending on the size of your website, you will have to decide how much and what type of navigation you need. There\u2019s the primary navigation, like the one you see here in Dollar Shave Club<\/a>\u2019s header:<\/p>\n\n\n\n

\"\"
–<\/figcaption><\/figure>\n\n\n\n

But notice that DSC also has a hamburger menu on the left. Here\u2019s what visitors find under this secondary navigation: <\/p>\n\n\n\n

\"\"
–<\/figcaption><\/figure>\n\n\n\n

The links above the line are more or less the same as what\u2019s in the primary navigation, but this time they include second-level links. <\/p>\n\n\n\n

The links below the line allow DSC to make all of the other pages accessible from the navigation without cluttering them up. What\u2019s more, by placing them under the hamburger icon, users don\u2019t have to scroll to the footer to find useful pages like Contact Us, Careers, and FAQ.<\/p>\n\n\n\n

CTA<\/h5>\n\n\n\n

Every website has a single action or goal that directs visitors to it. While a website will include an attractive call-to-action throughout its pages, it’s a good idea to keep the CTA in mind for visitors by putting it in the header as well.<\/p>\n\n\n\n

\"\"
–<\/figcaption><\/figure>\n\n\n\n

The CTA should be designed like the one on the site. If you use Elementor’s Global Site Settings to define your global button design, that will apply here too.<\/p>\n\n\n\n

\"\"
–<\/figcaption><\/figure>\n\n\n\n

Your CTA should also be placed at the far right of the header. These eye-catching links will not only bring visual balance to the header but also serve as useful shortcuts for conversions.<\/p>\n\n\n\n

This is explained by the design principle of the Serial Position Effect, which says that people remember the first and last items in a series more than others. So when they’re ready to convert, they don’t have to hunt down the CTA within the site’s content. They’ll know they can go straight to the header to do it.<\/p>\n\n\n\n

Search Bar<\/h5>\n\n\n\n

Websites with very large content archives or product inventories will greatly benefit from having a search bar in the header.<\/p>\n\n\n\n

There are a few things to note here.<\/p>\n\n\n\n

The first is that the search bar is not only represented by a magnifying glass. It is paired with the word “Search”. While this may be a fairly recognizable icon for many, it’s best not to assume that everyone knows what it is. It may also be too small on its own for people to easily find it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Also, notice how Mashable doesn’t push users to a new page to do their search. The search bar automatically populates the results based on the query, which can lead to a better user experience.<\/p>\n\n\n\n

Ecommerce<\/h5>\n\n\n\n

Websites with ecommerce functionality should always have an ecommerce element in their main header or utility bar. Here\u2019s how Sephora<\/a> does it:<\/p>\n\n\n\n

\"\"
–<\/figcaption><\/figure>\n\n\n\n

There are three ecommerce elements in the far right corner:<\/p>\n\n\n\n