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