Header

Build your header from a top bar, one of four main layouts, side navigation, and a navigation skin with its own animation.

Header Layout is the second sub-tab under Layout Settings. Its four sections combine to produce most of Highend's header variations: an optional top bar, the main header layout, side navigation, and the main navigation's look.

Where to find it: Go to HighendHighend OptionsLayout SettingsHeader Layout.

Top Header BarSwitchDefault: Onhb_top_header_bar

Shows a thin bar above the main header with contact info on the left and icons/buttons on the right. Turning it off hides the Top Header Settings section below.

Top Header Settings

The Top Header Settings section, showing the left and right widget toggles

Top Header ContainerRadioDefault: Aligned Containerhb_top_header_container

Wide Container stretches the top bar edge-to-edge and requires a Stretched global layout.

Left Widget: Info TextTextareaDefault: Call us toll free <strong>0800 1800 900</strong>hb_top_header_info_text

A short line of text (HTML allowed) shown on the left side of the bar. Leave empty to hide it.

Left Widget: Map DropdownSwitchDefault: Onhb_top_header_map

Adds a button that opens a fullwidth map dropdown showing the locations set in Map Settings.

Left Widget: Map Button TextTextDefault: Find us on Maphb_top_header_map_text

Label for the map dropdown button.

Left Widget: EmailTexthb_top_header_email

Contact email shown on the left side. Defaults to your WordPress admin email.

Right Widget: Social IconsSwitchDefault: Onhb_top_header_socials_enable

Shows social icons pulled from Social Links.

Right Widget: LoginSwitchDefault: Onhb_top_header_login

Shows a login link that becomes a personal menu dropdown once a visitor is logged in.

Right Widget: WPML LanguagesSwitchDefault: Onhb_top_header_languages

Shows a language switcher. Requires the WPML plugin.

Right Widget: Checkout ButtonSwitchDefault: Onhb_top_header_checkout

Shows a checkout/cart button. Requires WooCommerce.

Right Widget: Custom ButtonSwitchDefault: Offhb_top_header_link

Shows a custom button with its own icon, title, and link. The three fields below appear once this is on.

Button IconIcon pickerhb_top_header_link_icon

Icon shown on the custom button.

Button TitleTextDefault: Enter your text here...hb_top_header_link_txt

Label for the custom button.

Button LinkTextDefault: https://hb-themes.comhb_top_header_link_link

URL the custom button links to.

Header Layout

The Header Layout section, showing the four main header layout thumbnails

Main Header ContainerRadioDefault: Aligned Containerhb_main_header_container

Wide Container stretches the row holding your logo and navigation edge-to-edge.

Main Header LayoutRadio imagesDefault: Type 1hb_header_layout_style

Highend's four base header layouts: Type 1 (logo left, navigation right, same row), Type 2 (logo and an optional text box on their own row above the navigation), Type 3 (Type 2 with a centered navigation row), and Side Navigation (a fixed vertical panel instead of a horizontal header; see below).

Logo AlignmentRadioDefault: Lefthb_logo_alignment

Aligns the logo to the left or right of the header. Not shown for Type 3 or Side Navigation, which center the logo.

Sticky HeaderSwitchDefault: On for Type 1, Off for Type 2/3hb_sticky_header / hb_sticky_header_alt

Keeps the header pinned to the top of the viewport while scrolling. Not shown for Side Navigation.

Sticky Header HeightSliderDefault: 60hb_sticky_header_height

Header height in pixels while sticky, from 30 to 100. Shown only for Type 1.

Header HeightSliderDefault: 80hb_regular_header_height

Header height in pixels when not sticky, from 60 to 200. Shown only for Type 1.

Additional Text BoxTextareaDefault: Ultimate WordPress Theme<br/>With Powerful Page Builderhb_header_right_text

HTML text shown to the right of the logo. Shown only for Type 2.

Side Panel Navigation Options

This section only appears when Main Header Layout is set to Side Navigation, a fixed vertical panel that replaces the horizontal header entirely.

The Side Panel Navigation Options section

Side Panel BackgroundSelectDefault: Standardhb_side_nav_style

Transparent (standard on scroll) starts see-through over your page content and becomes solid once the visitor scrolls. If you use it, set a light logo in Logo Settings.

Choose Color StyleSelectDefault: Darkhb_side_color_style

Light or dark color scheme for the panel and its text.

AlignmentSelectDefault: Lefthb_side_nav_align

Side of the screen the panel docks to, or Center to center its content within the panel.

Background ImageImagehb_side_nav_bg

Covers the whole panel. Recommended size 370×1080px. Leave empty to use a plain color instead.

Social IconsSwitchDefault: Onhb_side_nav_enable_socials

Shows social icons below the navigation, pulled from Social Links.

Bottom Text AreaTextareaDefault: © [the-year] — Your Websitehb_side_nav_bottom_text

HTML text (shortcodes allowed) shown at the bottom of the panel.

Entrance AnimationSwitchDefault: Offhb_side_nav_with_animation

Animates the panel's elements in on page load.

This section appears for Types 1–3 (it's replaced by Side Panel Navigation Options for Side Navigation).

The Navigation Layout section, showing the four navigation skin thumbnails

Navigation SkinRadio imagesDefault: Thirdhb_header_layout_skin

The main navigation's visual style. Which Navigation Animation effects are available depends on this choice. The fourth skin supports the most.

Navigation AnimationSelectDefault: Bottom Border Grow Effecthb_navigation_animation

Hover effect on top-level menu items. Options change based on the selected Navigation Skin.

Search in NavigationSwitchDefault: Onhb_search_in_menu

Shows a search icon in the navigation bar.

Choose Search StyleRadioDefault: Default (AJAX Live Search)hb_search_style

Default opens a search field in the header with live results as you type. Modern (Search window) opens a search window instead: a rounded card near the top of the screen, over a dimmed and blurred page, in the navigation colors. It shows live results with a thumbnail, the type and the date (arrow keys to pick one, Enter to open it), and closes with Escape or a click outside.

Search AutocompleteSwitchDefault: Onhb_ajax_search

Shows live results while typing, in both search styles.

Offset Side PanelSwitchDefault: Offhb_side_section

Adds a slide-out panel triggered from the navigation. Add widgets to it under AppearanceWidgets in the Side Panel Section area.

Menu Cart ButtonSwitchDefault: Onhb_enable_sticky_shop_button

Shows a cart icon/button in the navigation. Requires WooCommerce.

Navigation Dropdown ColorSelectDefault: Darkhb_main_navigation_color

Color scheme for sub-menu dropdowns.

Expandable sub-menus for mobile devices?SwitchDefault: Onhb_interactive_mobile_dropdown

On mobile, lets a visitor tap a parent menu item to expand its sub-menu in place instead of navigating away immediately.

Mobile Menu StyleSelectDefault: Classic: three lineshb_mobile_menu_style

The button that opens the menu on phones and tablets, and the look of the menu itself. Options: Classic: three lines (three thin lines, the lower one shorter, with no animation), Modern: two lines (two thin lines that swap lengths on hover), Label and lines (the word "Menu", in the navigation font, before the two modern lines). Modern and Label and lines also give the menu itself a fresh look, see below.

Mobile menu look

Classic keeps the mobile menu panel as it always was. With Modern or Label and lines, the menu becomes a floating rounded panel in your header's navigation colors, over a dimmed page. It shows your logo and the close button on top, then the search field (when Search in Navigation is on) and the menu items, which rise in one after another in large type without borders. The sub-menu toggles are restyled to match.

With every style, the menu button tells screen readers whether the menu is open, and pressing Escape closes the menu and returns to the button.

On this page