Header tab in Customizer

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 and in others (Nav Bottom and Nav Centered) is styled as a separate menu bar below the header

​

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

​

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. The settings on this tab depend on the choice you make in the Layout field.

​

None

The header and menu are not displayed when the page first loads. The top bar remains visible if it is enabled. If you set the Fixed header field to Fade in, a header with the site title on the left and menu on the right will appear when you start scrolling the page on large screens only. On medium and small screens, the header remains hidden.

​

Nav bottom

Menu items appear below the header. The site title (or header logo) and the menu are left-aligned. Here’s the default Nav Bottom layout on medium devices: And here’s the default mobile layout. Either the Menu button or the hamburger icon will appear, depending on your setting in Customize > Header > Nav layout > Responsive nav toggle. Nav Bottom layout options:

• Padding - Vertical space in the top and bottom of the header area
• Fixed header - Disabled by default, or you can choose a type of fixed header
• Content layout - Add text, social icons, or both in a second column to the right of the header logo

​

Nav right, Nav left

Menu items appear to the right or left of the header logo respectively. Here’s a screenshot of a Nav Right layout with the site tagline enabled. Here’s the same Nav Right layout on medium devices, without any custom modifications. You can see that the layout has automatically shifted to a Nav Centered layout. Nav Left and Nav Right layout options:

• Padding - Vertical space in the top and bottom of the header area
• Fixed header - Disabled by default, or you can choose a type of fixed header

​

Nav centered

Menu items appear below the header. Both menu and header logo are centered. Nav Centered layout options:

• Padding - Vertical space in the top and bottom of the header area
• Fixed header - Disabled by default, or you can choose a type of fixed header

​

Nav centered + inline logo

In this layout, the header logo is centered and the menu items straddle the logo text or image. Nav Centered + Inline Logo layout options:

• Inline logo position - When there is an odd number of menu items, should the logo appear to the right or the left of the middle item?
• Padding - Vertical space in the top and bottom of the header area
• Fixed header - Disabled by default, or you can choose a type of fixed header
• Site tagline - You can add your site’s tagline below the header logo text

​

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

​

Header style

This category has several 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 header logo if you choose text instead of an image
• The Content layout area in the Nav bottom layout

​

Header logo

Choose Text or Image as the logo type. Text logo options:

• Font family
• Font weight
• Font size
• Logo text color
• Text hover color

Image logo options:

• Standard logo image
• High-DPI (retina) logo image
• Mobile header logo (different image for mobile devices)
• Fade In header logo (different logo for fade-in fixed headers)

You can set a different header logo image for mobile devices in the Mobile header logo field. By default, the max-width breakpoint for mobile devices is 768px.

​

Nav 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 WordPress search icon. By default, WordPress searches only Post titles and Post content.

​

Responsive nav toggle

Choose the Menu button or Hamburger icon to appear when the screen width goes below the responsive nav breakpoint.

​

Menu button text

If you choose the MENU button for the Responsive nav toggle, you can enter a custom label instead of MENU.

​

Responsive nav breakpoint

Choose the breakpoint at which to display the Hamburger icon or Menu button. The choices are:

• Always (displayed on every device size)
• Medium & small devices only
• Small devices only (default)

​

Hamburger icon position

If you chose to display a Hamburger icon, then you can change the vertical position where it appears. The default setting is 0 and increasing the value moves the icon down.

​

Responsive nav layout

You can choose one of the animated flyout settings or the standard menu dropdown to appear when you click the Hamburger icon or Menu button:

• Dropdown
• Flyout (various animation options)

​

Responsive nav layout position

Appears only when Responsive nav layout is set to a flyout choice. Choose whether the flyout menu appears to the left or right.

​

Responsive submenu toggle

This setting applies to the case in which you have a submenu of a submenu – in other words, multiple levels of submenus.

• Disabled - Clicking a top-level menu item opens all descendants with one click
• Enabled - You must click each level to display the next level of submenu

​

Responsive collapse

Choose No to allow more than one submenu to be open at the same time when the Hamburger icon or Menu button is in use. Choose Yes to automatically hide a submenu when another submenu is opened.

​

Nav style

The Nav style tab has the following settings:

​

Submenu indicator

You can enable a Font Awesome down arrow icon to main menu items that have submenus.

​

Nav background and text color

When the header layout puts the menu below the header logo area (Nav Centered or Nav Bottom), you can select:

• Background color or image for the menu bar
• Nav text color for large screens

​

Font family, weight, format, size

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