Note: If you are using the ‘Header & Footer Builder’, please refer to this link. But if you are using the old header and footer system, you can consider the below instructions.
Want to display contact info, social icons, or a secondary menu above your main header in Botiga? The top bar gives you a slim strip across the top of your site where you can showcase that information without crowding the main navigation.
In this guide, we’ll walk you through how to enable and configure the top bar in Botiga.
Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active.
Note: if you’re using the header and footer builder, follow our guide on using the header and footer builder instead. The steps below apply to the legacy header and footer system.
Enabling the Top Bar
From your admin area, go to Customize >> Header >> Top Bar and click the Enable Top Bar toggle.
General Settings
- Container type:
- Full-width — the top bar stretches across the entire screen.
- Contained — the top bar sits inside the default container.
- Delimiter style: choose the symbols that appear between top bar elements.
- Visibility: by default, the top bar only shows on desktop. Use this option to pick the devices you want it to appear on.
Adding and Configuring Elements
The top bar is split into two areas: the left and right sides. Add any of the following elements: Contact info, Social, Text, or Secondary menu. Drag and drop to enable an element and set its order.
Based on the element you choose, new options appear automatically in the Customizer for you to configure that element.
Note that each element can only be used once. For example, if you enable Social on the left side, you can’t add it to the right side as well.
Frequently Asked Questions
Below, we’ve answered some of the most common questions about the top bar in Botiga.
Can I show the top bar on mobile?
Yes. Change the Visibility option to include tablet or mobile devices in addition to desktop.
Can I add the same element to both sides of the top bar?
No. Each element can only be used once per top bar. Pick the side that fits your layout best.
How do I style the top bar colors?
Top bar colors and typography sit in a separate Customizer section. See our guide on styling the top bar for the full set of options.
That’s it! You’ve successfully enabled and configured the top bar in Botiga.
Next, would you like to fine-tune the main header below your top bar? Check out our guide on configuring the header layout in Botiga to learn more.
