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:
- Click Add Item under the respective section (Left, Center, or Right).
- Choose an item from the dropdown list.
- Configure additional settings if required.
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:
- Navigate to Admin Dashboard > Appearance > Customize > Header > Topbar
- Scroll down to the Primary / Secondary Menus section.
- Select a menu for Primary Menu.
- 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.