What To Include in Your Website Header

Introduction

How much thought went into the design of your website header?

If your answer is “not much” … that’s normal! The header can almost feel like an afterthought compared to all the content you’ve compiled and added across your website.

But the header is the FIRST thing people see when they visit your website. In fact, they mostly likely see the header across EVERY single page of your website! The design and layout of your header can actually be used very strategically to support a great user experience for your website visitors. And hopefully, help convert website visitors to customers.

Let’s take a look at the key elements to include in your website header and why each one is important. We’ll begin with the must-haves, then explore some nice-to-haves.

Must-Have Elements to Include in your Website Header

A good website header, at the minimum should include your logo/business name, a navigation menu, and a call to action button. Here’s why each one is important.

Logo & Business Name

Your website header definitely need to include your logo and/or business name.

Have you ever walked past a brick and mortar business that doesn’t have a sign out front? I have! And I find that it can leave you feeling a bit confused about what the business actually is, or if it’s worth checking out 👀

Logos are typically found in the top left corner or the center of the header on websites. I find that a rectangular, landscape orientation logos fit this space best.

Many businesses have square or round logos, but this can present some issues when it comes to designing your website. If the logo is too LARGE, it will make your header bar very wide and cut into the actual contents of the website. If your logo is too small, it will be difficult to read. Therefore I think that a rectangular logo works best.

If you do prefer to stick with a round or square logo (like I have on my own website), just make sure the text size is large enough to be legible.

For one website I worked on, the client had a really cool round logo that included their business name and tagline, but it was just too way too tiny when we added into the website header. We solved the issue by keeping the round logo, then adding some extra text with their business name right next to it, like so:

If you’ve worked with a brand designer, hopefully they provided you with several different logo options that can be used in different locations! Getting a few “variations” on your logo is standard component of branding packages these days.

Navigation Menu

The next “must have” feature in your header is the navigation menu.

The navigation menu shouldn’t just be a list of every single page that exists on your site. That would be FAR too busy and confusing for website visitors. If the nav menu has like 12 different links, how do you determine which is the most important?

Instead, use dropdown menus to strategically categorize your core website pages, making it easy to understand and navigate. Our brains like to process information in “chunks”, and that’s exactly what a good nav menu does.

A navigation menu for a dietitian website could look something like this:

• About
• Services
  • Nutrition Counseling
  • Insurance FAQ
• Resources
  • Blog
  • Recipes
• Contact

Of course, you might not even have that many pages on your site. An even simpler menu might look like this:

• About
• Services
• FAQ
• Contact

When creating your nav menu, thing about the key pieces of information that your website visitors are looking for, and highlight those items. If you have additional, less important items (such as your privacy policy and disclaimers pages), you can include those links in your website footer instead – but that’s a topic for another day.

You might be wondering why didn’t I didn’t include “Home” in these navigation menus. That’s because your website logo should link to your homepage. There is no need to clog up the nav menu by including an extra link to the homepage.

Call To Action Button

The next feature to include in your website header is the Call To Action (or CTA) button.

What is the purpose of your website? What are you trying to get your website visitors to do?

Perhaps you want people to…

• Contact you
• Book an appointment
• Explore recipes
• Shop?
• … or something else

The CTA button directs your website visitors to take action. If someone visits your website, it’s likely they’ll want to take action and explore whatever type of services you’re offering. The CTA button makes it easy by linking directly to a contact page, booking page, shop, or other key location.

Nice-To-Have Elements To Include Your Website Header

Depending on how you run your business, there are some additional things you might want to include in the header.

Social Icons

It’s common for businesses to display a list of social media icons somewhere on their website. Often, this is found in the website header. For my clients who want to include social media icons, I like to include them in a smaller banner that’s separate from the main header.

In my dietitian website template you’ll see social media links included in the top right corner.

Contact Information

You may also want to include contact information such as a phone number or address in your header. Businesses with a physical location will benefit from making this information immediately visible to website visitors.

Check out the website header I created for Crystal, a dog groomer in Chicago:

Crystal’s target audience is VERY local – people who live in the neighborhood who will bring dogs to her grooming salon. So prominently featuring her address is important. We also included her phone number so people can easily call her business with inquiries.

If you run a business that’s primarily online, as many dietitians do, including an address or other contact info may be less useful, or even irrelevant.

Search Button

If your website includes a blog or shop, you should consider adding a search bar or search button into your website header. If I’m visiting an e-commerce website, like Athleta.com for example, the search bar is almost always the first place I’ll go — to the site for a specific product like “running leggings” for example.

Banner

Adding an informational banner to promote a sale, offering, or service can be helpful. On my personal website, I use a banner to advertise the fact that I accept insurance.

The banner is usually a smaller, thinner bar that goes right above the “main” section of the header. Just don’t forget to edit it if you have a new sale or service to promote!

Conclusion

That sums it up – the key elements to include in your website header, plus a few extras that might be nice to include, depending on the needs of your business.

Will you be making any changes to your header? Is there a header element I missed? Let me know in the comments!