Elements

Elements are a key part of the Custom Header Builder, and you can include as many as you need.

Menu

Adds a navigational menu to your header, allowing users to access different sections of your site.

Menu The navigation menu to show. To create and/or manage menus, go to Appearance -> Menus

Submenu Arrow Whether to show the arrow indicator for menu items with submenus.

Mobile Menu Trigger At the mobile menu breakpoint, the navigation hides and a toggle button appears to open the mobile menu.

Trigger Position Related to the above option (if enabled), this option sets the placement of the trigger button within the current column, allowing it to be positioned at either the beginning or the end.

Menu Item Spacing The spacing between top-level menu items.

Menu Trigger

Creates a button or icon that toggles a menu type. The available options will depend on the selected menu type.​

Text

Allows you to insert custom text into your header for announcements, taglines, or other information. It supports shortcodes and HTML as well.

Search Field

Provides a search bar that enables users to search your site directly from the header.

Search Field Alignment The alignment of the input field in relation with the search button (🔎 icon). Useful to avoid search input overflow the container.

Search Field Visibility By default, the search input is hidden. It will only become visible when users click on the search icon 🔎. If you set the value to Always, the search input will remain visible at all times.​

Icon Animation Applicable when using On click search visibility, this setting will apply an animation effect when the search input is focused.

Social Icons

Adds icons linking to your social media profiles, enabling users to connect with you on various platforms.

Button

Inserts a customizable button into your header for calls to action or other important links.

Content

Color & Fill

Layout

Label The text displayed on the button.

Link The URL the button directs to.​

Open in New Tab Whether the link opens in a new window or tab.​

Background The button background colors for Normal, Hover, and Active states.

Text The button text colors for Normal, Hover, and Active states.

---

Fill Type Determines whether the button has an outline or a solid background

Padding Controls the space inside the button between its content and border.

Border Radius Sets the roundness of the button’s corners.

Date and Time

Displays the current date and time in your header, which can be useful for event-related sites or general information.

Date or Time Format Customize the format for displaying date or time. For more details, refer to the WordPress date format documentation.

My Account

Adds a section for user account management, allowing users to log in or access their account details.

Login Text Text displayed for guests (users who are not logged in).

Logged In Text Text displayed for logged-in users.

Show Icon The account icon displayed to the left of the text.​

Cart Totals

Shows the total amount of items and cost in the shopping cart, ideal for e-commerce sites.

Total Price Define how the total price is calculated and displayed: cart totals, subtotals, or totals excluding taxes.

Prefix Text The text shown before the price numbers.

Hide Empty Cart Hides the element completely when the cart is empty.

Cart

Displays a cart icon with a summary of items, enabling quick access to the shopping cart.

Icon Choose to show the cart icon or hide it.

Title Optional text displayed next to the icon.

Hide when Empty Hides the element completely when the cart is empty.

Counter Badge Option to display the number of items in the cart.

Click Action Choose whether clicking the icon shows a mini cart popup or redirects to the cart page.

Mini Cart - Show On Select the mouse event (Click or Hover) to display the mini cart popup, applicable when the click action is set to Show Mini Cart.

Mini Cart - Alignment Set the position of the popup relative to the clicked icon.

Language Switcher

Allows users to switch between different languages on your site, useful for multilingual websites.

Show Flag Choose to display the flag before or after the language name.

Flag Position Available when Show Flag is enabled, this option sets the flag’s placement relative to the language name.

Show Label The text that displays the language name in the switcher.

Label Format Choose how language names are displayed, including their native and translated forms

Skip Missing Translations Skip displaying languages in the list if no translations are available for the current page.

Breadcrumb

Provides a breadcrumb trail that shows the user’s current location within the site hierarchy, improving navigation and user experience.

Common Options

Visible On Manage the visibility of each header element across different viewports, including Desktop, Tablet, and Mobile. This feature ensures that you can tailor the display of elements based on the user’s device, enhancing the overall user experience.

Custom CSS Apply additional styling to each element with Custom CSS. This option allows you to add your own custom styles, providing greater control over the appearance and design of header elements beyond the default options

Style Options All style options are applied from the Style tab in the Header section. The following section will guide you through styling each header element in detail.