help center

Search
Close this search box.
On this page

Customize your Hello Biz Header

Last Update: February 16, 2025

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.

See all the options available for the Header.Β Β 

Want to add multiple headers and switch between them? See Switch between multiple headers in Hello Plus.

Customizing your Header

To customize your Header:Β 

  1. Go to WP Admin.
    1 click hello Boz Customize your Hello Biz Header 1
  2. In the panel, click Hello Biz.
    2 click customize Customize your Hello Biz Header 3
  3. In the Site Parts section under Header click Customize.
    The Elementor Editor opens with the Header visible.
    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.Β 
  1. In the Brand section, the dropdown menu should be in the default position of Site Logo.
    4b make sure site logo Customize your Hello Biz Header 5
    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.
    5 use teh dropdown to select site name Customize your Hello Biz Header 7
    If you prefer to use the site name in the Header, use the dropdown menu to choose Site Name.
  2. 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.
    7 Open call to action Customize your Hello Biz Header 9
  3. Open the Call to Action section.
    8 Enter Reserve Now Customize your Hello Biz Header 11
  4. In the Primary CTA text box, enter Reserve Now.
    9 enter the link address Customize your Hello Biz Header 13
  5. 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.
    10 Click the Style tab Customize your Hello Biz Header 15
  6. Click the Style tab.
    11 Click call to action 1 Customize your Hello Biz Header 17
  7. Open the Call to Action section.
    12 click Hover Customize your Hello Biz Header 19
  8. Click Hover.
    Clicking Hover means that you are editing the style when users mouse over the button.
    13 select accent 1 Customize your Hello Biz Header 21
  9. Click the globe icon next to Text Color and select Accent.
    14 Select Primary Customize your Hello Biz Header 23
  10. 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.Β 

Content tab Site Identity 1 Customize your Hello Biz Header 25

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.
Content tab Navigation 4 Customize your Hello Biz Header 27

This helps Accessibility apps identify the menu. You can change the menu name but we recommend using the default.

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

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 upload svg Customize your Hello Biz Header 29 to upload and use your own svg file.
  • Click the hamburger icon hamburger menu Customize your Hello Biz Header 31 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 No icon Customize your Hello Biz Header 33 to remove this indicator.
  • Click the down arrow icon down arrow Customize your Hello Biz Header 35 to open the icon library and choose an icon from there.
Content tab Call to Action 1 Customize your Hello Biz Header 37

Enter the text you want to appear on the button.

Enter the URL you want visitors to access when they click the button.

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.

Toggle to Show to add a second CTA button.

Style tab

Determine the look and feel of the Header.

Style tab Site Identity 1 Customize your Hello Biz Header 39

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.

When using a logo, use the slider to determine the width of the logo.

When using the site name, set the font color. For details, see Choose a color or Use global fonts and colors.

When using the site name, Set the font type and size. For details, see Typography.

Style tab Navigation Customize your Hello Biz Header 41

Set the font type and size of the menu. For details, see Typography.

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

Set the color of the navigation menu. For details, see Choose a color or Use global fonts and colors.

Use the slider to set the distance between the individual items in the menu.

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.

You can see how your site will look on different devices by clicking the Mobile, Tablet and Desktop icons in the top editor bar.

Editor top bar Customize your Hello Biz Header 43

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.

Style tab Call to Action 1 Customize your Hello Biz Header 45

Type: Use the dropdown to determine if the CTA will appear as a button or as a link.Β 

Set the font type and size of the button or link. For details, see Typography.

  • Normal:Β  Determine how the button or link appears by default.Β 
  • Hover: Determine how the button or link appears when moused over.Β 

Set the color of the button or link text. For details, see Choose a color or Use global fonts and colors.

(Button only)

Use the to switch between:

  • Classic background Customize your Hello Biz Header 47 Solid background (Classic)
  • Gradient background Customize your Hello Biz Header 49 Blended background (Gradient).

For details, see Create a Background.

The color of the background. For details, see Choose a color or Use global fonts and colors.

(Button only)

Toggle to Yes to add a border to the CTA button. If you add a border, you’ll have to determine:

Click the pencil icon to add shadow to the toggle. Learn more about shadows.

Add space between the button’s borders and the text. For details, see Padding and margins.

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

Style tab box 5 Customize your Hello Biz Header 51

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.

Toggle to Yes to add a border around the Header. If you add a border, you’ll need to determine:

Click the pencil icon to add shadow to the Header. Learn more about shadows.

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.

Advanced tab 5 Customize your Hello Biz Header 53

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

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article