Skip Navigation
Acheter
Accueil » Course lessons » Styling a Site Header and Footer in WordPress

Styling a Site Header and Footer in WordPress

The Site Header and Footer help users to navigate through your site. It’s important to understand what users expect when they look at these and how you can design them appropriately.

Designing the Header

Don’t reinvent the wheel when it comes to your header. It’s important that users navigate without getting confused, so try to make sure that your header has all the expected elements in sensible places. 

Some examples of useful header elements are:

  • Site logo
  • Navigation menu
  • Search bar
  • Language switcher
  • Contact or call-to-action button

A well-known way to order the elements is to have your logo on the left, the menu or navigation in the center or middle-right, and then a search or language switcher on the right side of your header. 

You can control your header in the Customizer, but if you are not sure how then check your theme documentation or consult their team. 

A site with a Header displaying the logo on the left and navigation on the right. 

Please note that if your site is in a language that reads from right to left (RTL), then we recommend reversing this order. 

If you want to design a site with a logo or other header elements above your menu navigation, you need to build a 2-3 row header. Some themes, such as Astra, Blocksy, and Kadence allow building these in the Customizer. 

Here is an example:

An example of a website with a 2-row Header

Compared to 1-row headers, these offer more customization options but are more complicated to design and style.

Header Styling Guidelines

When it comes to designing your header, please follow these guidelines:

  1. Keep the header slim. We recommend 60-80px for its height.
  2. Don’t use a logo with colors that clash with your site design and color palette. Either adjust the logo or adjust the site design. They must complement each other. 
  3. Use the correct logo size. It needs to be noticeable, but not so big that it takes up too much space. People pay attention to the upper left corner the most, so even if it’s a moderate size it will be noticeable.
  4. Keep your navigation tidy, and don’t overwhelm it with too many menu options. If you need a lot of different navigation options, try incorporating dropdowns to arrange them better. 
  5. Use 15-18px for the font size of your navigation menu. Your text should be readable, so make sure it’s a color that doesn’t disappear into the header color. As a nice touch, add a hover color that contrasts well with the background. You can use your accent color for this. 
  6. Always check that your Header shows up appropriately on different screen sizes, such as mobile. 

As a bonus, if your theme allows you to, using a transparent background over your header image makes it very stylish and professional. Themes such as Astra, Kadence, and Blocksy have this feature. You can see it applied in the example below:

An example of a website with a transparent header

Sometimes you might need to set up a different version of your logo for your Header because the colors on other pages differ from your home page color. In this case, you can change the logo in the Customizer. This functionality depends on your theme, so make sure to check your theme documentation. 

The usual page header uses a dark logo (Astra Theme)

The transparent header for the homepage uses a white version of the logo (Astra Theme)

The footer, found at the bottom of every site, is important for helping users navigate a website. It is the safety net for those who were not able to find the info they needed from navigating the site. 

The footer usually includes:

  • Terms of Use
  • Refund Policy or Privacy Policy
  • Copyright Information
  • Contact information (if there is none in the header)
  • Company logo
  • Icons with links to relevant social network pages
  • Search widget
  • Language switcher
  • Additional links

To control what goes in the footer, use the Footer tab or Footer Bar tab in the Customizer. Sometimes, themes have different names for this tab so check your theme documentation to find it.

It’s important you keep your footer design as simple as possible. When styling the footer, you should follow these guidelines:

  1. Use the same font size for all texts, preferably around 12-16 for best readability
  2. Control the text hierarchy and readability of your content by using Typography styling correctly.
  3. Avoid using a lot of images, icons, or long paragraphs of text in the footer.

A website footer with no styling

A website footer with styling applied

Feel free to use a dark or light background color for your footer, but make sure the text is still readable over it. 

Cloe
Updated
mai 11, 2021
Send feedback to our documentation team