Header Customization Options

This article was last updated on the December 21, 2016.

In this article about the Customizer, we’ll cover the various options provided for the header settings.

Getting Started

Make sure you have the Customizer open and then click on Header:

Header options customizer

Once you’ve clicked that, you should see something like this:

All header options

Let’s explore these options one by one and see how the effect our website.

As we can see the first option, is the Navbar position:

Navbar position

There are four options in total for the Navbar position, which are:

  • Static Top
  • Fixed Top
  • Fixed Left
  • Fixed Right

Let’s cover those one by one, static top is exactly what it says, static, this means when you scroll, you won’t see the navbar/menu at all, and you’ll need to scroll back to the top, so if we had our menu set to static top, our site would look like this:

Static top menu

Notice how we have no menu as we scrolled? Now if we change that and set our menu to fixed top, we should see something like this:

Fixed Top

Notice now how our menu is fixed to the top, so fixed top, when we scroll shows the menu still, perfect if you want to make navigation easier for the users of your site, to not have to keep scrolling to access the menu.

A greater change will be seen if we switch our menu to Fixed Left, if we set Fixed Left, you’ll see something like this:

Fixed Left

We can see our menu is now on the left instead of the top, similar to fixed top, the menu is now fixed left, so however much we scroll etc, the menu will always be fixed to the left. Now if we switch the menu to Fixed Right, we’ll see the same result, as Fixed Left just with the menu to the right rather than the left of course, like this:

Fixed Right

Logo And Nav

The next option is for the logo and navigation, there’s two simple options, either inline or stacked. Stacked means the logo will be above the menu (if you are using static top or fixed top), inline means that the logo will be inline with the rest of the menu. Let’s take a look at how these look on the site. So if we select inline our site looks like this:

Inline, not stacked!

If we select the stacked option, our site looks like this:

Stacked!

In the same section, we can also edit the spacing for the logo bar, top and bottom, the value entered in these boxes, effects the padding top and bottom.

Padding, top and bottom!

Here’s what our site looks like before we edit those values:

Padding values standard

Now if we change the top padding value to 50, we’ll see a bunch of additional white space above the logo like this:

Padding Top, white space

That means if you want to remove that white space, you can just lower the value as needed, normally you’d have around 5 entered, just so it doesn’t sit right below the browser bar of the end user.

Now if we edit the bottom spacing value, we’ll see our site look like this:

Padding bottom, white space

As we can see, it’s added some white space below the logo, which has pushed the nav/menu bar down.

Navbar

The next option that is available to set is the Navbar top height:

Navbar top height

This allows us to set the height of the Navbar itself, you’ll want this normally to be between 40 and 60, otherwise, there’s going to be a very squashed look unless you add additional CSS.

If we set the value to say 100, you’ll see that the Navbar has changed height like this:

Navbar height changed

Notice now how we have the additional white space under our nav item? This is all part of the navbar and can easily be changed with that one option, the higher the value entered, the more whitespace there will be.

Logo

The next options you see are all to do with the logo and how it displays, starting with the logo font, as we covered above, if you have custom fonts set to off, you won’t see this option:

Logo font

The next option you’ll see is for the Logo font-color.

Logo font color

This has a On or Off value, by setting it to On you’ll see a color selector in the Customizer for selecting the logo font color, like this:

Logo Font color selector

Clicking on Select color, will open the color selector like this:

Logo font color selector open

If you don’t have logo font color, set to on, you won’t see this option and won’t be able to set the logo font color from the customizer.

The next option you see is for the Logo Font size, this is a px value.

Logo font size

For example, with a value of 42 entered, our logo looks like this:

Logo font size 42px

If we change the value to say 60px, our logo then looks this:

Logo font size, 60px

The next option displayed is for the Logo font weight:

Logo Font Weight

This has three values, which are:

  • Book
  • Regular
  • Bold

With the value set to Book our logo looks like this:

Book Logo

With the value set to Regular our logo looks like this:

Regular Logo

With the value set to Bold our logo looks like this:

Bold Logo

The next option displayed is the Logo letter spacing:

Logo Letter spacing

This is a slider based setting, allowing you to set the letter spacing of the logo in a em rather than PX value, the em value of the slider can be between -0.15em to 0.5em.

The next option in the customizer is called Uppercase:

Uppercase

This has a value of either On or Off, with setting the value to on, it forces our logo to be uppercase, even if we entered lowercase text, with it set to Off, it’ll show the logo as you entered it.

Logo

The next option is the logo, this a simple option and just let’s you select a logo from the media library, or upload a new image to the media library to use as your logo.

Setting that would replace your site title, so the logo would show in place of the site title, in the navigation area.

Logo Nav

Alignment

The next option is for the Navbar Top Logo alignment in a PX value.

Alignment

Navbar

The next options are all related to the Navbar text and font.

Navbar options

The first Navbar related option is for the Navbar font:

Navbar Font

As covered further up, if Custom fonts is set to Off, this option won’t be available to set.

The next option you’ll see is called Navbar Links, this has a option of a color selector, to set what color you want your navbar links to be.

Navbar Links

If we set that to a blue color, we’ll see that our navbar menu links are now blue like this:

Navbar Link color changed

Notice how the Home link though is still black? This is because, it’s the current active menu item and is actually covered, by the Navbar links hover:

Navbar Links Hover

For example, if we set that to red, we can then see that the home menu link has changed to red like this:

Navbar Links Hover Changed

And of course, as it’s a hover setting, when we hover over another menu item on the navbar, that will also change to red like this:

Navbar Link Hover main

The next option you’ll see is for the Navbar menu font size:

Navbar font size

This is a PX value, with a value of 10 set, our menu looks like this:

Navbar fontsize 10

But if we change that value to 18, our menu then looks like this:

Navbar font size 18

The next option is for the Navbar Font size:

Navbar Font Weight

This again has three option of:

  • Book
  • Regular
  • Bold

If we have the font weight set to Book, our Navbar looks like this:

Book font weight

If we change the font weight to Regular our Navbar then looks like this:

Regular Font weight

If we then change the font weight to Bold our Navbar then looks like this:

Bold Font weight

The next option is for the Navbar Letter Spacing, this is the option for setting how much space in a px value is between each letter in the navbar.

Navbar Letter spacing

This is a slider based setting, allowing you to set the letter spacing of the logo in a em rather than PX value, the em value of the slider can be between -0.15em to 0.5em.

The last option for the Navbar typography is called Uppercase

Navbar Uppercase

It has a on and off value, if it’s set On, it forces uppercase characters for all Navbar text, if it’s set to Off the Navbar text will show exactly how you entered it.

The next option is for the Navbar Top link alignment and Navbar Top link spacing, both values are in PX.

Navbar alignment

Search

The next option is the search

Navbar Search

Setting this to On will show the search icon in the Navbar, so if we set that to On, you’ll now see a search icon in your Navbar like this:

Search Icon - Navbar

If you then click the search icon, you’ll see that a overlay comes up, to allow you to type and enter something for your search.

Overlay Search

Mobile Buttons

The next option you’ll see is for the mobile alignment:

Mobile button alignment

This sets the alignment of the mobile navbar button in a PX value.

Widgets

The next option up is widgets, this is for the header widgets area:

Header Widgets

So if we set the value to Two, you’ll notice we now have a extra button above our navigation area like this:

Header widget part 2

If you click that, you’ll see a empty dropdown like this:

Header widgets part 3

It’s currently empty, as we don’t have any header widgets set. These can be set in wp-admin > Appearance > Widgets.

Miscellaneous

The last two options within the header section are Topbar and breadcrumbs, let’s take a look at both of those:

Topbar and breadcrumbs

If we set Topbar to On, you’ll see a new bar at the top of your site, like this:

Topbar

As you can see our top bar shows above the logo area and by default contains the social icons we set in the earlier article here.

Once you’ve set Topbar to on, you’ll be able to enter any Topbar content you want, for example if we just enter some plain text, it’ll show in the Topbar area like this:

TopBar content

This is perfect for entering something like a phone number or other contact details for your business.

The last option of breadcrumbs, which defaults to on, can be turned on or off, so with breadcrumbs on, on a post or page, we’ll see the breadcrumb of where that page is located, like Home > Post title, like this:

Breadcrumbs on

Now if we turn breadcrumbs off, you’ll site would look like this:

Breadcrumbs Off

Traditionally, breadcrumbs are seen as useful for your users to navigate the site and know where they are, but with breadcrumbs it gives a cleaner look, overall it’s down to personal preference.

Congrats! Throughout this article, you’ve learnt how to use the various header options enabled in the Customizer.