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:
Once you've clicked that, you should see something like this:
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:
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:
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:
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:
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:
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:
If we select the stacked option, our site looks like this:
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.
Here's what our site looks like before we edit those values:
Now if we change the top padding value to 50, we'll see a bunch of additional white space above the logo like this:
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:
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:
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:
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:
The next option you'll see is for the 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:
Clicking on Select color, will open the color selector like this:
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.
For example, with a value of 42 entered, our logo looks like this:
If we change the value to say 60px, our logo then looks this:
The next option displayed is for the Logo font weight:
This has three values, which are:
With the value set to Book our logo looks like this:
With the value set to Regular our logo looks like this:
With the value set to Bold our logo looks like this:
The next option displayed is the 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:
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.
Alignment
The next option is for the Navbar Top Logo alignment in a PX value.
Navbar
The next options are all related to the Navbar text and font.
The first Navbar related option is for the 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.
If we set that to a blue color, we'll see that our navbar menu links are now blue like this:
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:
For example, if we set that to red, we can then see that the home menu link has changed to red like this:
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:
The next option you'll see is for the Navbar menu font size:
This is a PX value, with a value of 10 set, our menu looks like this:
But if we change that value to 18, our menu then looks like this:
The next option is for the Navbar Font size:
This again has three option of:
If we have the font weight set to Book, our Navbar looks like this:
If we change the font weight to Regular our Navbar then looks like this:
If we then change the font weight to Bold our Navbar then looks like this:
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.
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
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.
Search
The next option is the 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:
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.
Mobile Buttons
The next option you'll see is for the mobile 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:
So if we set the value to Two, you'll notice we now have a extra button above our navigation area like this:
If you click that, you'll see a empty dropdown like this:
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:
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:
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:
Now if we turn breadcrumbs off, you'll site would look like this:
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.
