How can we help you?

View Categories

Topbar

1 min read

The Topbar section in the Customizer allows you to configure and style the topbar section of your website. You can access these settings by navigating to:

Admin Dashboard > Appearance > Customize > Header > Topbar

This section provides options to enable or disable the topbar, add different elements, and customize its appearance.

Topbar Layout Options #

The topbar supports three content positions where you can add elements:

  • Left Items
  • Center Items
  • Right Items

You can add and customize various elements in these positions.

Available Items for Topbar #

You can add the following elements to the Left, Center, or Right sections of the topbar:

  • Primary Menu – Displays the selected primary menu.
  • Secondary Menu – Displays the selected secondary menu.
  • Language – Shows a language switcher (requires a compatible plugin).
  • Currency – Displays a currency switcher (requires WooCommerce and a compatible plugin).
  • Language/Currency – A combined widget for both language and currency switching.
  • Socials – Displays social media icons (configured in theme settings).
  • Hamburger Menu – A compact menu for mobile-friendly navigation.

To add an item:

  1. Click Add Item under the respective section (Left, Center, or Right).
  2. Choose an item from the dropdown list.
  3. Configure additional settings if required.
Topbar
Topbar on frontend

Language Switcher: Install WPML or TranslatePress – Multilingual to setup language switcher.
Currency Switcher: Install FOX – Currency Switcher Professional for WooCommerce to setup currency switcher

Primary & Secondary Menus #

You can assign specific menus to display as the Primary or Secondary menu in the topbar:

  1. Navigate to Admin Dashboard > Appearance > Customize > Header > Topbar
  2. Scroll down to the Primary / Secondary Menus section.
  3. Select a menu for Primary Menu.
  4. Select a menu for Secondary Menu.

These menus can be displayed in the Left, Center, or Right sections of the topbar using the menu widget.

Appearance Customization #

In addition to adding elements, you can customize the appearance of the topbar. These settings allow you to match the topbar with your site’s design. Appearance options include:

  • Background Type: Choose a solid color, gradient, or image.
  • Font Color: Customize text and link colors for better readability.

These settings help you create a visually appealing and functional topbar that enhances navigation and user experience.

Summary #

The Topbar customization options provide flexibility in adding menus, social icons, language/currency switchers, and more. With additional styling options, you can ensure the topbar aligns with your site’s branding.

For further assistance, create a support ticket in the member’s helpdesk.