What is the Hello Biz Header?
Headers appear at the top of your site’s pages. They usually contain your site’s logo, navigation links for quick access to important pages and a CTA button.
Customizing your Header
To customize your Header:
- Go to WP Admin.
- In the panel, click Hello Biz.
- In the Site Parts section under Header click Customize.
The Elementor Editor opens with the Header and Footer visible.
- Click the Header to start editing it.
The Header options appear in the panel.
Customize the Header options
The Header has three sections:
- Brand: Use a logo or business name to identify the site.
- Navigation: Create quick links to the site’s pages.
- Call to Action: Provide visitors a quick way to interact with you.
- In the Brand section, the dropdown menu should be in the default position of Site Logo.
Selecting a logo is part of customizing your site.
You can change your logo by clicking Change Site Logo in the panel. For details, see Adding images and icons.
If you prefer to use the site name in the Header, use the dropdown menu to choose Site Name. - The Navigation section controls the quick links to the site’s other pages. For now, we’ll leave that at the default settings. See below for all the navigation options.
The Call to Action section controls the button in the Header. Since this is a Header for a sports bar, we’ll put a link to the reservation form here.
- Open the Call to Action section.
- In the Primary CTA text box, enter Reserve Now.
- In the Link field enter the URL of the reservation form.
Now let’s change the style of the Call to Action button so that it changes when users mouse over the button.
- Click the Style tab.
- Open the Call to Action section.
- Click Hover.
Clicking Hover means that you are editing the style when users mouse over the button.
- Click the globe icon next to Text Color and select Accent.
- Click the globe icon next to Color and select Primary.
When users mouse over the button the background and text colors will flip.
Settings for the Menu widget
You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.
Content tab
Add, delete, and edit Header items and controls.
Site Identity
Brand: Use the dropdown menu to choose:
- Site Logo: display your logo in the header.
- Site Name: Display your company name in the Header. You can use the dropdown menu to change the HTML tag of the site name. We recommend using the default tag.
- Change Site logo: If you’re using a logo, click to select a different logo. For details, see Adding images and icons.
Accessible Name
This helps Accessibility apps identify the menu. You can change the menu name but we recommend using the default.
Menu
The Header uses the WordPress menu to create its quick links. If you have more than one WordPress menu, use the dropdown to select which menu to use. For details, see Create a navigation menu
Responsive Toggle Icon
Controls the navigation when the site is accessed from a mobile device.
Menu: By default, the menu is represented by a hamburger icon. To change this:
- Click the upload icon
to upload and use your own svg file. - Click the hamburger icon
to open the icon library and choose an icon from there.
Breakpoint: Use the dropdown menu to choose:
- Mobile: Have the Header use its mobile settings when accessed from a device less than 767 pixels wide.
- Table: Have the Header use its mobile settings when accessed from a device less than 1024 pixels wide.
- None: Don’t use the Heading mobile settings.
Submenu indicator icon: Menu sometimes contain submenus. For example, the menu for Contact Us may contain submenu items such as: Reservations, Parties and Employment Opportunities. By default, these submenus are indicated by a down arrow, but this can be changed:
- Click no icon
to remove this indicator. - Click the down arrow icon
to open the icon library and choose an icon from there.
Primary Link
Enter the text you want to appear on the button.
Link
Enter the URL you want visitors to access when they click the button.
Icon
By default, no icon appears on the button. You can change this:
- Click the upload icon to upload and use your own svg file.
- Click the dot icon to open the icon library and choose an icon from there.
Secondary CTA
Toggle to Show to add a second CTA button.
Style tab
Determine the look and feel of the Header.
Align Logo/Site Name
Use the icons to switch between displaying the logo or site name at the start of the Header or in the center of the Header.
Logo Width
When using a logo, use the slider to determine the width of the logo.
Text color
When using the site name, set the font color. For details, see Choose a color or Use global fonts and colors.
Typography
When using the site name, Set the font type and size. For details, see Typography.
Typography
Set the font type and size of the menu. For details, see Typography.
Normal/Hover/Active
- Normal: Determine how the navigation menu appears by default.
- Hover: Determine how the navigation menu appears when moused over.
- Active: Determine how the navigation menu appears when selected.
Text color
Set the color of the navigation menu. For details, see Choose a color or Use global fonts and colors.
Menu Item Spacing
Use the slider to set the distance between the individual items in the menu.
Submenu
Layout: If there is a submenu, use the dropdown menu to determine if the submenu items will appear:
- Horizontally, from top to bottom.
- Vertically, from side to side.
Shape: If there is a submenu, determine the shape of the submenu:
- Round: Buttons appear with smooth corners.
- Rounded: Buttons appear with evenly curved edges.
- Sharp: Rectangular buttons.
Responsive Menu
You can see how your site will look on different devices by clicking the Mobile, Tablet and Desktop icons in the top editor bar.
Text Align: When the site is accessed from a mobile device, determine if the menu items appear at the start of the header or in the center of the header.
Divider: Toggle to Yes if you want to add a divider between the menu items when the site is accessed from a mobile device. If you add a divider, you will also be able to choose:
Color: The color of the divider. For details, see Choose a color or Use global fonts and colors.
Weight: The thickness of the dividers.
Toggle Icon Size: On mobile the menu is replaced by a toggle icon. Visitors tap the toggle to open the menu. Use the slider to adjust the size of the icon.
Normal/Active:
- Normal: Determine how the toggle that displays the menu appears by default.
- Hover: Determine how the toggle that displays the menu appears when moused over.
Toggle Icon Color: Determine the color of the toggle that displays the menu. For details, see Choose a color or Use global fonts and colors.
Primary CTA
Type: Use the dropdown to determine if the CTA will appear as a button or as a link.
Typography
Set the font type and size of the button or link. For details, see Typography.
Normal/Active
- Normal: Determine how the button or link appears by default.
- Hover: Determine how the button or link appears when moused over.
Text Color
Set the color of the button or link text. For details, see Choose a color or Use global fonts and colors.
Background Type
(Button only)
Use the to switch between:
Solid background (Classic)
Blended background (Gradient).
For details, see Create a Background.
Color
The color of the background. For details, see Choose a color or Use global fonts and colors.
Border
(Button only)
Toggle to Yes to add a border to the CTA button. If you add a border, you’ll have to determine:
- Color: For details, see Choose a color or Use global fonts and colors.
- Shape:
- Round: Buttons appear with smooth corners.
- Rounded: Buttons appear with evenly curved edges.
- Sharp: Rectangular buttons.
Box Shadow
Click the pencil icon to add shadow to the toggle. Learn more about shadows.
Padding
Add space between the button’s borders and the text. For details, see Padding and margins.
Responsive Width
Use the dropdown menu to select Stretch if you want the CTA button to spread across the entire width of the Header when accessed from a mobile device.
Background
Background type: Set a background for the Header. Use the icons to switch between a solid background (Classic) or a blended background (Gradient). For details, see Create a Background.
Color: The color of the background. For details, see Choose a color or Use global fonts and colors.
Border
Toggle to Yes to add a border around the Header. If you add a border, you’ll need to determine:
- Border Width: Use the slider to set how thick the border is.
- Color: The color of the border. For details, see Choose a color or Use global fonts and colors.
Box Shadow
Click the pencil icon to add shadow to the Header. Learn more about shadows.
Padding
Add space between the Header’s border and the contents. For details, see Padding and margins.
Advanced tab
Control the placement of your widget, insert links, add custom code and more.
Behavior
Most of the options avaialble in the Advanced tab can be found in Advanced tab settings.
Behavior is an additional function. It allows you to select:
Float: Toggle to Yes to allow the Header to hover over other content on the page.
If you toggle flat On, you’ll have these options:
- Offset: The distance between the top of the Header and the top of the screen.
- Width: Set the width of the floating area.
- Shape: Set the floating are to be:
- Round: Smooth corners.
- Rounded: Evenly curved edges.
- Sharp: Rectangular.
Sticky: The sticky property keeps the Header visible even when the visitor scrolls through the content. Options are:
- On scroll up: Header becomes sticky as soon as visitor starts scrolling back up the page.
- Always: Header is always sticky.
- Never: Header is not sticky.
Advanced
Learn more about the Advanced tab settings.
