Customizer settings: The Header tab

The Beaver Builder Theme supports several different header styles with a variety of styling options.

The header area includes:

  • An optional top bar
  • The main header area, which contains text or a logo
  • A navigation menu, which in some header layouts is part of the main header area, or in others is styled as a separate area, as shown in the following screenshot.

See the Related Articles on where menu colors come from and additional screenshots of header layouts.

Troubleshooting tip: Beaver Theme Heading theme layouts override these Customizer settings on the pages to which they apply. If your Customizer settings don't seem to be working, check to see if the header is being controlled by a theme layout.

The Header tab includes the following subtabs:

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 > General > 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.

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. 

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 > Genral > 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.

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. 

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.

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.

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.

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. 

Choose Text or Image as the logo type. For image logos, you can add both a standard and high-DPI (retina) version.

New in Beaver Builder Theme Version 1.6, you can upload a different logo for Fade In header layouts. For example, you might want to upload a smaller or shorter version of the logo that will fit in the narrow upper band.  After you've uploaded the logo, make sure you've selected the Fade In type of fixed header in Customize > Header > Header layout

On the Nav Layout tab, you can control the following aspects of the nav menu in the header. 

  • Nav item spacing
    Set the number of pixels between menu items. 
  • Nav search icon
    Choose whether or not to display a search icon. 
  • Responsive nav toggle
    Choose a MENU label or a hamburger icon to appear instead of the expanded menu at the responsive breakpoint.
  • Responsive nav breakpoint (NEW in Beaver Builder Theme 1.6)
    Choose the breakpoint at which to display the hamburger or MENU label. The choices are:
    • Always (displayed on every device size)
    • Medium & small devices only
    • (Default): Small devices only

The Nav style tab has the following settings:

Submenu indicator (New in Version 1.6)

You can enable a Font Awesome down arrow icon to main menu items that have submenus, as in this screenshot.

Font family, weight, format, size

You can set the font family, weight, format, and size specifically for the navigation menu. 

Nav background, text color

When the header layout puts the menu below the header logo area ( Nav Centered or Nav Bottom), you can select a background color or image for the menu bar plus nav text color. 

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.