Blog Header Design Guide [+ 79 Header Examples]

Header Design Guide

The blog header is the first element displayed on your website. It provides easy navigation for users to go through your blog posts. Make sure to check out our blog footer guide after this.

Header Design Guide

The Blog Header Guide

This article will cover all you need to know about blog headers. From best practices to countless examples. Keep reading.

Create a Header on WordPress

[This setup is done in the Kadence theme. The setup process should be similar and independent of them with minor variations]

Go to WordPress [Haven’t installed WordPress? Check out our guide to setting up a blog].

On the left sidebar, hover over Appearance, and click on customize in the side dropdown:

Blog footer setup - Navigating through WordPress

Then, click on the header in the left sidebar.

Blog footer setup - Clicking on header customizations

You will then see the following sidebar [Check out our blog sidebar guide]

header customization

The available items are elements you can add to your header. They include:

  • Logo
  • Primary navigation
  • Secondary navigation
  • Search [To display a search bar]
  • Button [For a call to action]
  • HTML [To create custom elements. This section requires coding, so unless you know to code, ignore this]

To add the elements to the header, click, hold and drag the element bar to the footer customization belt [Shown below]

Header customization

For example, if you want to add a logo: Click, hold and drag it to wherever you’d like to see it in the header [Dispalyed below]:

Header customization

To edit the elements, click on the gear icon which represents the setting for that specific element

Logo customization settings

Scrolling down, you will also find the following options:

  • Transparent header
  • Sticky header
header customization

The sidebar has two tabs: The General and Design tabs. Click on the design tab:

header customization

You can then fully customize the header background

header design customization

You can also select at what screen size should the desktop version of your header change to the mobile version of your header [If your desktop and mobile header are different].

To customize the design options of the specific elements in your header, you must click on the gear icon for those elements to access their specific design tabs.

How to make a transparent header in WordPress

Click on the transparent header, and then toggle the enable transparent header:

Enable transparent header in header customization settings on WordPress

Which will then display more customization options

Transparent header customization

The further customization of the transparent header allows you to disable the transparent header on

  • The search page
  • The archive page
  • All pages
  • All posts

You even have the option to display it on desktop and mobile. You can either display it on a desktop, mobile, or both. And of course, you can have a separate logo for the transparent header.

The separate logo activates when a user starts scrolling on a page [Which is also when a transparent header activates].

Keep in mind, a transparent header is a sticky header by default.

Click on the design tab, which lets you fully customize the colours for the following:

  • Site title colour
  • Navigation colours
  • Navigation item’s background colour
  • Button colours
  • Social icon colours
  • HTML colours
transparent header design customization

How to make a sticky header in WordPress

Click on the sticky header and then open the dropdown for ‘enable header’:

enable sticky header in header customization in WordPresss

And choose the type of sticky header you want. You can also enable a sticky header for mobile and can choose from the same dropdown options:

Sticky header customization

You also get 3 more customization options

sticky header customization

The first option ‘Enable Reveal Stick on Scroll up’ sets the sticky header to only activate when a user is scrolling up. So, the header pops up when a user scrolls up

The second option ‘Enabled Main Row Shrinking’ sets the stick header to shrink in height so it takes less space on the screen. This option is great if your original header is large in height.

This will automatically shrink the header when a user scrolls. Upon toggling the main row shrinking option, you get to choose the shrink height [Shown below]:

main row shrinking feature

You also have the option of displaying a different logo for mobile.

Click on the design tab, and you will be able to customize colours for different elements [The same as in the transparent stick header design tab]:

sticky header design customization

But you will also have the ability to change the stick header background.

And you can set up a sticky header border for the bottom of the header [To make it easier to differentiate where the header ends and where the page starts when scrolling].

Make a mobile header

Keep in mind, for most of the above design customizations, they can be done separately for mobile. Simply click on the mobile icon at the bottom of the sidebar to customize everything for mobile.

Mobile header customization

Blog header design guide

Follow these guidelines to build industry proven guidelines [Some are optional depending on the number of links or type of site you have].

Use proper spacing within the blog header

The header is the thin bar at the top of the screen. 

It should be clear and concise. There should be enough spacing between elements. 

For example, the logo, navigational links, as well as the Call To Action need to be spaced out. 

There are no spacing values set in stone you should follow. 

But, a good measure is to keep sufficient distance between elements, where it’s clearly visible that there are 2 separate elements. 

Simply put, there should be enough spacing so that 2 elements don’t look like they’re part of a single element in the blog header. 

Padding between header boundaries & elements

The elements inside the header should have enough background padding above and below it. 

For example, take Apple’s header. All the elements look neat and spaced out. And, there is a good amount of space between the elements and the background’s upper and lower boundaries.

Header example

You could even have a lot more space than Apple’s header does, like the example below. It’s all based on personal preference.

Header example

Make header elements highly visible

Visibility is important to make it easier for people to read and process what they’re seeing. In fact, it has only become more important to have high visibility due to accessibility issues for people with disabilities.

So, having high visibility is no longer important for high visibility, but to also avoid legal issues [You don’t want some Karen to sue you for having a yellow font on a white background].

Readability affects blog post SEO [Check out our Blog Post SEO guide to find out the 7 SEO ranking factors]

Increase font readability

Use simple fonts like Arial or Times New Roman that are easy to read. In fact, this header element font should be the same as your content font [Assuming you’re using a highly readable font for your content].

Nothing fancy. Take it a step further and make the text bold to increase visibility.

Have high colour contrast

All the elements in your header must be in contrast with the background of the header. For example, if your header background is white, make your text font colour black. If the background is black, make the font colour white. 

Sticky header


A sticky header sticks to the top of the webpage independent of how much you scroll. The purpose of a sticky header is to provide you with immediate access to navigation.

It is also used as a method to increase the click through rate on a call to action. If you add a call to action in a sticky header, it will be displayed to the user the entire time they’re on your site, which is great advertising.

Here are the guidelines you need to follow when using a sticky header:

Sticky header guidelines

There are two main sticky header guidelines:

Make it sleek

Since it will be stuck to the top of the webpage, it will be consuming space. Therefore, it’s a good idea to make it sleek, so it takes as little from the screen space as possible and doesn’t end up irritating the user.

This may mean a reduction in your current header height. This also means a reduction in your logo size [Usually the header is more significant in height to allow more space to increase the logo size].

For this, you can always create a separate header [As mentioned in the header design guide above], that turns on the moment a user scrolls a certain distance.

This way, you can have a big header initially to show off your logo and call to action, and when the user starts scrolling, it becomes really sleek, to still show navigation [and a smaller logo & call to action].

To provide an actual range for a sticky header, its height should be in between the range of 40 – 100 px. You can always test it out yourself, and see what height you prefer [Get user feedback as well].

Don’t make it stand out

Ensure the colours are close to neutral, or that they don’t stand out. The sticky header should be there to provide quick access, but it shouldn’t become a distraction.

Avoid using fancy header backgrounds visuals or colours. Stick to using a plain colour. And make sure there is still some padding in between the header boundaries and elements.

Transparent header


A transparent header is transparent, so you can see what’s behind the header. This is a great visual effect for visually heavy sites. Because it adds an extra level of cool to the overall user experience.

At the same time, it’s not the best for every site. Regardless, there are certain guidelines to follow when using transparent blog headers.

Transparent header guidelines

There are two main transparent header guidelines:

Have high contrast

If your header is white or a light colour, and transparent, stick to using stark black as your font colour to ensure maximum contrast between the header’s transparent background and text.

Since the header will be transparent, there may be times when the header will pass through colours making it hard to see the text in the title. The best way to avoid that is to use a dark black font.

For more robust measures, make the text bold for increased visibility.

If your header is black or a dark colour, and transparent, stick to using stark white as your font colour to maximum contrast. And, bold the text for increasing visibility.

A transparent header is a sticky header by default

This is obvious, but if you’re using a transparent header, it needs to be a sticky header. But, because of this, all guidelines that apply to sticky headlines must also apply to transparent headlines

Add hover effects to header links

Hover effects are typically changes to the link’s colour which makes it more obvious to users whether they’re hovering over a link.

The hovering colour can be a lighter or darker tone than the original colour, or it can be drastically different.

For example, if the original link colour is white, you can have the hover colour be a grey tone or stark black.

Instead of the link colour, you can even have an underline as the hover effect. So, when a user hovers over the link, it gets underlined.

Only have links in the header

The header should be sleek. It should have unnecessary elements on it. A good way to know what’s a necessary element for a header is to ask whether it’s a link. Unless it’s a link, it doesn’t need to be in the header.

This includes text or headlines. Oftentimes, bloggers place their taglines under their logo. This isn’t needed and takes up unnecessary space. Such text, taglines, and headlines

It’s best to place any text or headlines as part of the hero section. 

The hero section is considered above-the-fold content that’s right below the blog header. 

Since it should be simple and concise, it’s better to minimize any text and/ or headlines. 

It will already have your navigational texts. Don’t overcomplicate the header. 

What should a blog header include? [8 Elements]

A blog header should include the following 8 elements at the bare minimum:

Your blog logo

The blog logo immediately informs users what site they’re on. It’s the easiest way for them to remember you [Other than your blog name].

Check out our Logo Design Guide to make a stellar logo if you haven’t already. Usually, the logo is placed on the left side of the header as shown below

Where to place the logo in the header?

It could also be placed in the center [Not so common] like the one below:

Where to place the logo in the header?

To add the logo, drag and drop the ‘Logo’ bar from the available items

How to place the logo in the header on WordPress?

And click on the gear icon for customizing it.

Where to place the logo in the header on WordPress?

Navigational links

Then, the users must be able to navigate through your site with ease. Which is the purpose of the navigational links. The navigational links are usually in the center and spaced out well [Shown below]:

where to place navigational links in the header?

They can also be placed to the right [Show below]:

where to place navigational links in the header?

The most common navigational links you should have are:

  • Home [Takes you to the home page]
  • About Me [Takes you to the About page]
  • Blog [Takes you to the blog archives]
  • Resources [Takes you to a resources page]
  • Pricing [Takes you to the pricing page if you’re selling products/ services]

You can add primary or secondary navigational links by dragging and dropping them from the available items:

How to place navigational links in the header?

A call to action

The header is the best place to display a call to action. The header is on all web pages.

So, your call to action will always be displayed to users. A call to action can either get them to sign up for your email list, a free product, a webinar, etc.

It lets users know what you mainly have to offer to them [Other than your blog content]. It is one of the best list building methods in our email list building guide.

In the example below, the header has a call to action in the form of a green box informing people to get started for free

call to action in the header

To add a call to action, simply drag and drop the ‘button’ bar.

How to add a call to action in the header on WordPress

Then click on the gear icon for customization.

How to add a call to action in the header on WordPress

Search bar

Having a search bar or search icon in the header can be quite helpful for blogs or sites that have tons of pages, content, or products. 

And the most accessible place to have a search bar is the header. Wordstream uses a search bar in its header as well:

Using a search bar in the header

To add the search bar, simply drag and drop the ‘Search’ bar from the available items

How to add a search bar in the header

And place it here. You can then customize the search bar by clicking on the gear icon

How to add a search bar in the header

If your theme doesn’t have a search bar as an available item, check out this guide to set up a search bar.

Shopping cart icon

Shopping cart icons are great for headers where several products are sold. It’s a great way to remind users about purchasing, as well as abandoned carts. 

If you’re just a blog with a few products, you don’t need a shopping cart icon. But if you’re an ECommerce website that sells a ton of products [With a blog on the side], then you should have it.

Here are two examples of headers that utilize a shopping icon:

Add a shopping cart in the header
Add a shopping cart in the header

To get such an icon, you would need to create a separate widget and then add it to the header. Check out the following guide to set up a shopping cart icon in your header.

A login

The login element is needed if you provide access to special content, products, or services that users had to register or sign up for.

It can provide access to subscription based content [One of the 9 methods we cover in our blog monetization guide].

A login can be set up in the same manner that a call to action is set up [Using the button tab].

Or, check out this guide to set up a proper login popup.

Once you get the unique shortcode [Which is HTML] for it, you can easily add it to your header by dragging and dropping the ‘HTML’ bar from the available items

How to add HTML custom widgets to the header?

And then click on the gear icon

How to add HTML custom widgets to the header?

You can then add the HTML shortcode under the text tab

How to add HTML custom widgets to the header?

For example, from the guide [Linked above], I took their shortcode

How to add HTML custom widgets to the header?

And simply copy paste it into the HTML

How to add HTML custom widgets to the header?

Which displayed the following login/ register link.

How to add HTML custom widgets to the header?

Social media links

Social media links can also be placed within blog headers. Gathering traffic from social media is on of the 15 methods we discuss in our guide to increase blog traffic.

These links are usually placed in headers when that blog social media wants to be specifically promoted. 

As in, the blog wants users to know about their social media pages and follow them there.

To add social media links, drag and drop the social bar

How to add social media links to the header?

And click on the gear icon to customize the social media icons and links

How to add social media links to the header?

The example below displays social links in the header as a dropdown

social media links in the header example

Here is an example of a header that displays several social media links

social media links in the header example

Accessibility modes

There are several accessibility features you can provide to users, but here are two that can easily be provided.

To set up accessibility features, the easiest method is to utilize accessibility plugins.

Language switch

A language switch widget allows users to change the language of the content displayed. So, if they aren’t fluent in one language, they can switch to one they are fluent in. 

Colour contrast switch

A colour contrast switch changes the contrast colour combinations on the site which certain users will find easier to view. Hubspot has a colour contrast switch in their header as well [The toggle feature]:

accessibility features in the header example

Below is the display before the toggle is on:

accessibility features in the header example

And below is the display after the toggle is on:

accessibility features in the header example

You will need to create a widget that includes these accessibility features and then place it into your header.

What is a blog header?

The blog header is the top bar on a blog or site. 

Many confuse the header with the ‘above the fold’ content. ‘Above the fold’ content comprises the header and hero section. 

The hero section is under the header. for example, here is a blog post by backlink. Below is what you’d see when you’d enter the web page:

Example to differentiate between the header and hero section

And below is what’s considered the header of the blog:

The blog header

Where the hero section is considered what’s under the header [Show below]:

The Hero section

65 Blog Header Examples

Here are 65 examples of blog headers:

header example 1
1. Wix
header example 2
2. Hubspot
header example 3
3. WordStream
header example 4
4. SmartBlogger
header example 5
5. Ahrefs
header example 6
6. MasterClass
header example 7
7. Neil Patel
header example 8
8. Blog Tyrant
header example 9
9. Grammarly
header example 10
10. Buffer
header example 11
11. Hostinger
header example 12
12. JeffGoins
header example 13
13. Ryan Robinson
header example 14
14. CopyBlogger
header example 15
15. Fiverr
header example 16
16. SearchEngineJournal
header example 17
17. SpendPennies
header example 18
18. AllRecipes
header example 19
19. Simply
header example 20
20. FoodNetwork
header example 21
21. TheRecipeCritic
header example 22
22. TheGobeAndMail
header example 23
23. MyMove
header example 24
24. DH
BONUS header example
25. BEST
header example 26
BONUS Example. StyleCaster
header example 26
26. NewYorkPost
header example 27
27. WireCutter
header example 28
28. VancouverIsAwesome
header example 29
29. Dozr
header example 30
30. DigDifferent
header example 31
31. BigRentz
header example 32
32. BonAppetit
header example 33
33. AllRecipes
header example 34
34. Forbes
header example 35
35. GoodHouseKeeping
header example 36
36. Tom’sGuide
header example 37
37. TheSpruceEats
header example 38
38. Healthline
header example 39
39. Women’sHealth
BONUS header example
BONUS Example. MetagenicsFitnessEquipment
header example 40
40. G&GFitnessEquipment
header example 41
41. Self
header example 42
42. Childhood 101
header example 43
43. ArtBar
header example 44
44. MomJunction
header example 45
45. KiwiCo
header example 46
46. TeachingExpertise
header example 47
47. IDTech
header example 48
48. MilwaukeeWithKids
header example 49
49. VeryWellFamily
header example 50
50. Parents
header example 51
51. GentleNursery
header example 52
52. WhatMomsLove
header example 53
53. HealthyChildren
header example 54
54. BabyCenter
header example 55
55. Canva
header example 56
56. VV
header example 57
57. DesignYourOwnLovelyBlog
header example 58
58. Impact
header example 59
59. Colibri
header example 60
60. ThemeGrill
header example 61
61. Apple
header example 62
62. Samsung
header example 63
63. Microsoft
header example 64
64. Dell
header example 65
65. IBM

14 Mobile Header Examples

Below are 14 examples of mobile headers along with how their menu looks like when it is opened.

Mobile header example 1
1. HubSpot
Mobile header example 1
Mobile header example 2
2. WordStream
Mobile header example 2
Mobile header example 3
3. SmartBlogger
Mobile header example 3
Mobile header example 4
4. MasterClass
Mobile header example 4
Mobile header example 5
5. Ahrefs
Mobile header example 5
Mobile header example 6
6. BlogTyrant
Mobile header example 6
Mobile header example 7
7. Neil Patel
Mobile header example 7
Mobile header example 8
8. Buffer
Mobile header example 8
Mobile header example 9
9. Backlinko
Mobile header example 9
Mobile header example 10
10. SearchEngineJournal
Mobile header example 10
Mobile header example 11
11. JeffGoins
Mobile header example 11
Mobile header example 12
12. RyRob
Mobile header example 12
Mobile header example 13
13. TheBlogStarter
Mobile header example 13
Mobile header example 14
14. EverWell
Mobile header example 14


Does every website need a header?

Yes, every website needs a header. It is a mandatory part of the website that makes it possible for users to navigate through the site.

What is a good header size for a website?

A good header height should be in between the range of 40 – 150 px

What is the difference between a header and a hero section?

The header is the navigation bar at the top of any site. Whereas the hearo section is the section right below the header on any page. Both header and the hero section generally make up the ‘above the fold’ content of a web page.

Are bigger headers better?

No. Headers should be small and compact while not being congestive and easy to navigate through.