Header layout type (Themer)
The Header theme layout in Theme Builder applies to the top bar, header, and nav area at the top of a page.
Header layout template
Here's the initial layout that you see when you create a header theme layout.
This initial layout consists of the following rows and modules:
- Two rows, one for the top bar and one for the header area. The header area row has an initial blue background color.
- The top bar has an HTML module containing placeholder text for the phone number and email address.
- The icon group module contains the major social icons.
- In the header row, there's a Heading module on the left, with a Site Title field connection in the Heading field, and a Menu module on the right.
Tip: If you ever want to revert to this default layout, click the Templates button when you're editing the theme layout in Page Builder.
When you edit the Header theme layout before opening Page Builder, there are three settings that control how the header behaves.
This is equivalent to the fixed header in the Beaver Builder Theme. The header stays in place at the original size while the page is scrolled.
If you choose a sticky header, you also get the option to shrink it as the page scrolls up. The amount of shrink is determined by the height required for the full-size header logo, text and menu.
Note: Fixed and sticky headers only apply to large devices. No matter what the setting, the header scrolls up out of sight on medium and small devices.
The row background for the header becomes transparent, and the content row moves up to the top of the window. The overlay appears at all screen sizes. Here's an example.
In this screenshot, the background image is set on the first row in the content area (along with a dark gray background overlay color set to 50% opacity), and that row's bottom padding is set to 160px to push down the page title so it doesn't interfere with the header.
How Stick, Shrink, and Overlay settings work together
You can enable all three sticky, shrink, and overlay settings, and here's how that all works together.
- As described above, the Overlay setting works on all device sizes, but the Sticky and Shrink settings only work on large devices.
- If you enable Overlay plus a Sticky header, on large devices the transparent header converts to a sticky header as soon as you start to scroll. The sticky header background is whatever you set for the header row background.
- If you enable Overlay plus Sticky plus Shrink, the header shrinks as you continue to scroll down, just the same way it does when there's no overlay.