In the last tutorial I showed you how to create your WordPress site’s primary navigation Menu. This is one of the most important elements within any Website Header.
In this article I explain how to customize your website Header design in WordPress.
The sections of this tutorial are:
- What is a Header
- Website Header Ideas
- Building a Custom Header in WordPress
- How to Edit WordPress Headers
What is a Header?
A Header is the top section of a website. This usually contains the website logo, the navigation menu, and sometimes also a Call-to-action banner. It is sometimes referred to also as the website masthead.
The header is extremely important for any website, as it sets the tone for the visitors experience. Since visitors to your site will see the Header first, it gives visitors an immediate indication of what the site is about.
It is very common to have different header layouts for various parts of your website. For example, you can have a large header for the homepage, which includes an image and a Call-to-action, and then a small header for the rest of the website with just the logo and the menu.
The header design and colors should be consistent across the website, since the Header forms part of the site identity. So, even when the inner pages have a smaller Header, this should be a sort of condensed version of the homepage header.
Website Header Ideas
You can get inspiration for website header ideas from various sites out there. What you need to decide is whether to go with a minimalist header or a more fancy header.
I like to stick to a simple minimalist header layout. For me this means, Headers with the logo on the far left and the navigation Menu bar on the right.
It’s then up to you whether you want to have a white background or a colored one. Just keep in mind what your base colors are. Also, the colors you use in your logo and Header background need to contrast so that the logo in the Header stands out.
NB: It is Important to understand the difference between the Website Header and the Primary Navigation. The Header refers to the whole top section of your website. The Primary Navigation refers only to the Menu part within the Header.
In WordPress settings, when making changes to Primary Navigation, such as colors, width etc., you are only affecting these changes in the Menu bar, and not on the entire Header. WordPress Customizer settings for the Header are included in a different section.
In the step-by-step guide below I will show you exactly how to adjust for each.
Building a Custom Header on WordPress
Making your own Headers is quite easy with WordPress, and the GeneratePress Theme I recommend for your website.
Before I show you how to modify header in WordPress, however, we need to make sure that our Menu settings are properly set up.
This will be needed to visualize the edits we make to our Header design and features.
You will understand better why we’re doing this as we move through the tutorial. In the meantime, make sure that the following relevant Menu settings are correct in your WordPress dashboard.
- the Menu Settings for the Top Navigation Menu should be set to ‘Primary Menu’. To check this, go to Appearance > Menus and confirm that next to Display location you ticked the box ‘Primary Menu’.
2. Make sure you have some sub-menu pages set up in your current Menu settings.
You will need this to check how the changes you make when styling the Menu bar will look in sub-menu dropdown boxes. Remember to SAVE any changes before you leave the Menu settings page.
3. Finally add at least 6 to 8 paragraphs of Lorem Ipsum text to your Homepage. This will give your Homepage some depth to allow you to test the Sticky Header settings (since this requires scrolling up and down to verify).
Now that we have the correct Menu setup, let’s start to edit the Header.
In the next part of this tutorial, I will show you, step-by-step, how to easily edit your website header in WordPress.
How to Edit WordPress Header
We will do this through the Customize settings in our WordPress dashboard.
Log into your WP dashboard and go to the left side Menu.
Remember, anything you need to alter for your website’s style can be done from the Customize settings section.
Click on Appearance > Customize
Here you will find a whole section dedicated to the Header styling. In this section we find the settings for the width, height, and background color of our Header.
Click on Layout > Header
Check out the preset options first. This gives you some common Header layouts that GeneratePress have pre-set in the theme we downloaded.
Click on each one to see how your Header changes and then choose the one you want. This will just be the starting point.
We will amend certain features of the Header with the options that follow. In this part, however, we will be setting the base structure of our website Header.
Tip: While changing the menu layout you may notice that the size of your logo does not fit well with the Header size in the new layout you are creating.
In this case just go back to customizer (press back button on the left-side menu and not the ‘x’ as otherwise you will lose any changes you would have made till now).
From customizer option click on SITE IDENTITY and then drag the logo width lever left to right to see which size fits best with the new Header you are designing.
Once you’re happy with the size go back to: Layout > Header.
WordPress Custom Header Options
After you choose one of the pre-set Header layouts, we start the customization process. Here you can edit WordPress headers with various options. Let’s go through them.
Header Width
Choose if you want the Header to be Full Width or not. I always choose FULL as it will look good on any device.
Inner Header Width
Here you decide if the items within the Header should be contained within a certain pre-set dimension or if you want them to move in line with the external Header width.
I like to set this to ‘Contained’ so that they align to the main body of the page.
Header Alignment
I suggest to keep this LEFT so as to stick with a traditional Header style.
Header Padding
The Header Padding settings allows you to set the spacing from the top, bottom, left and right of the Header.
Tip: by clicking on the ‘chain-link’ icon at the right of the numbers you can then just change one number and the rest will follow suit. I usually set this to around 12 for all.
Play around with these settings and see what looks good.
Remember that the Header needs to look good on all devices (desktop, tablet and mobile). So ideally you want to amend the Header spacing by device category.
To do this, just click on the little desktop and mobile icons on the right of the ‘Header Padding’ title. Now set different padding amounts for your desktop and for the mobile version of the website header.
Tip: Remember to click on the PUBLISH button every few minutes to ensure your changes are saved just in case something happens.
Another reason I recommend frequent Publish clicks, is because the ‘x’ button (close window button) is located just on top of the ‘<‘ button (back button), which is not ideal. When I was just getting started with WordPress I used to click on ‘x’ (close) instead of ‘<‘ (back) quite often and lose all the changes I made from the last Publish click.
Use Navigation as Header
This will leave only your Navigation Container as the Header which makes it much smaller. Up to you how you prefer but I usually do not click this option.
Mobile Header
This allows you to have tailored settings specifically for mobile. You might want to come back to this if your current header does not look good on mobile.
Modify Header Style
In the next step we will style our Header to reflect the brand guidelines of our website.
Header Colors
Let’s start with setting the colors for our Header background and internal Navigational Menu.
Go to Appearance > Customize > Colors.
First, we will start with the Menu colors, including the Text Color, Dropdown menu color, background color, hover color etc.
Remember the distinction between Header Colors and Primary Navigation colors as I mentioned above. You will need to change colors for both these categories separately.
In fact, the customize areas in WordPress are distinct as you can see in the below snapshot.
Go ahead and set the colors in line with your website’s brand guidelines.
As you can see from the above, I set the same background color for my Header Background, my Primary Navigation Background and also my Sub-Menu background.
This way the whole Header area has a consistent color in it.
Header Typography
Next up, we will set the fonts or typography for our Header.
Go to Appearance > Customize > Typography.
Scroll down to the Primary Navigation part of the left-hand menu and under Target Element choose PRIMARY MENU ITEMS.
Now choose the Font Family, font size, font weight (Bold level), line height and line spacing that match your branding guidelines, or whatever looks good in your header. Play around and adjust accordingly.
The setting in my screenshot below are the actual settings I chose for my website. Feel free to copy them if you wish.
Primary Navigation Settings within Header
Next up we will adjust the settings for the Primary Navigation (Menu banner) section of our WordPress Header.
Go to Appearance > Customize > Layout > Primary Navigation
Scroll to the bottom where you will find 4 levers to set the
- Menu item Width
- Menu item Height
- Sub-Menu item Width
- Sub-Menu item Height
Play around with these settings to ensure that the menu items are spaced out correctly and that they aren’t too close or too far apart from each other.
Keep an eye out also for the text, to ensure it is evenly spaced out.
Remember to regularly check how the Header is looking both on desktop and mobile.
Amend the setting accordingly for each device by pressing on the mobile or desktop icon on the right of each item setting.
Search Option in Header
You might also want to include a ‘Search’ option in your Header.
This is the feature that will let your visitors perform a search function when looking for something specific on your website. It is represented by a magnifying glass icon.
We can set this from the Primary Navigation settings we’re currently in.
In the Primary Navigation Settings, look for ‘Navigation Search’ and from the dropdown choose ENABLE.
You will notice a magnifying glass icon pop up next to your menu.
Sticky Navigation in Header
The Sticky Menu navigation in the Header, is a feature where your logo and menu bar stick to the top of the website while the visitor is scrolling through the articles on your website.
If you choose to enable this feature, you will get extra setting options to decide how the sticky menu acts.
I suggest you opt-in for the sticky navigation feature as it gives a better user experience to your site visitors.
To enable this, go to Customize > Layout > Sticky Navigation
Under the Sticky Navigation drop-down list, choose ON.
Under Transition you choose how you want the switch from the main header to the sticky header to show. This means; how the sticky header will appear as the user starts scrolling. The options are, Fade In, Slide, or None (meaning it just appears immediately).
Next is the ‘Hide when scrolling down’ option.
Here you must choose whether you want the sticky navigation header to disappear when users scroll down and re-appear when users scroll up, or alternatively to stay in place all the time, i.e. whichever way user scrolls.
I usually tick the ‘Hide when scrolling down’ option.
I prefer my sticky header to appear when users are scrolling back up, because usually this means they are finished from that page and want to navigate to some other page on my website.
By making the menu appear on scroll up you are facilitating their user journey and there’s a better chance the user stays on your site to read through more articles. This is ultimately also a good SEO signal for Google ranking.
Next sticky header option is to add a Logo image in the sticky navigation settings.
If you don’t add the logo image here, your logo will not appear in the Sticky Navigation Header, even though it is showing in the main Header.
Finally, you have the Menu Item Height settings. Play around with the Height of the Sticky Menu and test it out to see which looks best. I have set mine at 54.
Remember to click on the PUBLISH button once you’re ready from this section of settings.
Your Header should be complete now. Feel free to go back and forth, amending any changes you consider necessary.
Website Header Done. What Next?
That’s it. You now have a custom WordPress Header for your Website.
We’ve set the header design, the website header size and colors, and our website masthead is now complete with the navigation bar and ready to welcome our visitors.
For the sake of completeness, I must add that the WordPress theme and site builder we are using, i.e., GeneratePress and GenerateBlocks, also allow you to build a WordPress Custom Header from scratch.
If you want to understand, in more detail, the range of Header Elements and Settings offered in GeneratePress you can find information in their official YouTube video below.
Now that the Website Header is done, we will turn our attention to the Footer section in the next Tutorial.
As usual we also have a full list of WordPress Tutorials to choose from.
