Customizer Settings: The Header Tab

The BizTek Builder Theme supports several different header styles with a variety of styling options. The header area includes an optional top bar, the header logo area, and a navigation menu. See the Related Articles on where menu colors come from and additional screenshots of header layouts.

Screenshot of the BizTek Builder home menu.

Top bar layout

You can optionally enable a top bar strip above your header with up to two columns of content. It’s a great place for quick messages or social icons.

If you select Text for either column, you can enter HTML in the content areas, such as links to email addresses, heading tags, or even a small image.

If you select Social icons, configure the icons at Customize > Settings > Social links. See the Related Articles for more information.

If you enable just one column, the content is centered. If you enable two columns, the left column is left-justified and the right column is right-justified at larger screen sizes. As the screen is sized smaller, the two columns become stacked and centered.

The maximum width of the content is controlled by the  Content width setting in Customize > General > Layout. See the Related Articles for more information.

Top bar style

You can set the following styles in the top bar:

  • A background color or image in the top bar, with all the usual settings for positioning and sizing the background image.
  • Top bar text font color, link color, and hover color.

Header layout

Header layout settings apply to both the main header and menu areas, not the top bar. We’ll cover the options one by one.

Layout

There are several layout choices.

None

The header and menu are not displayed. The top bar remains visible if enabled. See the Related Articles for the CSS to display the header but hide the menu.

Nav bottom

Menu items appear below the header. Both menu and header logo are left-aligned. As screen width is sized smaller, menu items are replaced by the word MENU or a hamburger icon, depending on which  Nav layout option you choose.

Screenshot of a nav bottom, left layout.

With the Nav bottom layout, there is also a Content layout setting. If enabled, you can add text, social icons, or both in a second column to the right of the header logo. If you select Social icons, configure the icons at Customize > Settings > Social links. See the Related Articles for more information.

Nav right, Nav left

Menu items appear to the right or left of the header logo respectively. As the screen is sized smaller, menu items appear centered below the header, then at even smaller sizes the word MENU is displayed beneath the header. This screenshot shows the Nav Left layout.

Screenshot of the nav left layout.

As screen width is sized smaller, menu items appear centered below the header, then as the width is reduced even more, menu items are replaced by the word MENU or a hamburger icon, depending on which  Nav layout option you choose.

Nav centered

Menu items appear below the header. Both menu and header logo are centered.

Screenshot of the nav bottom and centered layout with logo centered.

As screen width is sized smaller, menu items are replaced by the word MENU or a hamburger icon, depending on which  Nav layout option you choose.

Nav centered + inline logo

Menu items straddle the logo.

Screenshot of the menu centered with the logo inline.

As screen width is sized smaller, menu items appear centered below the header, then as the width is reduced even more, menu items are replaced by the word MENU or a hamburger icon, depending on which  Nav layout option you choose.

There is one other setting for this layout choice.

  • Inline logo position: When there are an odd number of menu items, should the logo appear to the right or the left of the middle item? In the screenshot, the setting is Right.
Nav vertical left, Nav vertical right

Header and menu items appear in a vertical bar along the left or right side of the page in the header background color, with fixed layout (doesn’t scroll with the content to the right). You can customize settings for the width and padding of the left or right bar.

Screenshot of the menu in a vertical bar on the left.

Tip: The header logo is sized according to the amount of space in the vertical bar. If the logo appears too small, decrease the Padding setting first, then try increasing the Vertical nav width setting.

As screen width is sized smaller, menu items appear centered below the header, then as the width is reduced even more, menu items are replaced by the word MENU or a hamburger icon, depending on which  Nav layout option you choose.

Padding

You can change the padding to vary the amount of vertical space in the header logo area.

Fixed header

A fixed header means that as the page is scrolled down past the header, the header logo area and menu stay displayed at the top of the page, maintaining the background color you set for the header. There are several options for fixed headers, and they vary a bit by the layout you choose, as described here.

Note: The Fixed header setting is not available for the Nav vertical left and Nav vertical right layouts.

Disabled

Disables the fixed header, meaning the header is only displayed as the regular header when you are at the top of the page. With this setting, you have two additional options:

  • Hide header until scroll
    The page loads with no header displayed, but displays after the visitor starts scrolling down.
  • Scroll distance
    You can set the number of pixels of downward scrolling before the header is displayed.
Fade-in

The menu items appear to the left or right of the header logo in a narrower bar with the heading background color. The top bar disappears. As screen width decreases, the fixed header disappears.

For Nav bottom, Nav centered, Nav right, and Nav centered + inline logo layouts, the order is header logo to the left, menu items to the right, as shown in this screenshot.

Screenshot of header logo to the left and menu items to the right.

For the Nav left layout, the order is menu items to the left, header logo to the right.

Note: For the Nav bottom layout, if you added text or social icons to the header logo section in the Content layout setting, they won’t appear in the fixed header.

Shrink

The header logo shrinks into a smaller vertical space, with the top bar displayed above it. As screen width decreases, the fixed header and top bar disappear.

For Nav bottom and Nav centered layout, the logo vertically shrinks into a narrower area (left-aligned and centered respectively), with the top bar displayed above it and the menu left-aligned or centered below it.

For the Nav centered + inline logo layout, the header logo stays inline with the menu items displayed to left and right, but the header logo shrinks in size.

Fixed

The header and top bar remain at the regular size and stay fixed at the top while the page is scrolled down. As browser width decreases, the header and top bar disappear.

Header style

This category has a number of settings that relate to two aspects of the header logo area:

  • Background
    You can set a background color or image, with associated style settings.
  • Text color
    You can set text color, link color, and hover color. These color settings apply to the two parts of the header logo area that can contain text: the header logo if you choose text instead of an image; and the Content layout area in the Nav bottom layout. Note that the hover color also styles the current page item in the menu.

Header logo

Choose Text or Image as the logo type. Image logos support a standard and high-DPI (retina) version.

Nav layout

Set the spacing between navigation menu items. Choose whether or not to show a search icon. Also, choose a menu icon or a hamburger icon for mobile navigation.

Nav style

Set the font family and font styles for the navigation menu. When the header layout puts the menu below the header logo area ( Nav Centered or Nav Bottom), then you can select the background color or image and font options for the menu bar. For other header layouts, you can select font options only.

Note: Some nav layouts like  Nav right turn into a  Nav centered layout as the screen is sized smaller, but in this case the nav bar cannot be styled in Customizer for the smaller devices. You’ll have to write your own customization.

 

Last updated on Dec 1, 2016