Our theme includes a versatile “Top Bar” area — a thin strip located above the main header. It is the perfect place to display contact information, a secondary menu, social media icons, or important announcements.
Accessing Top Bar Settings
To configure the Top Bar, navigate to Appearance → Customize in your WordPress dashboard, then go to Header → Top Bar.
Turn the Enable Top Bar switch ON to reveal the configuration settings.
1. Top Bar Layout & Visibility
Top Bar Width
Control how the Top Bar aligns with the rest of your site:
- Content Width: The content aligns with your main site container. Recommended for most sites.
- Full Width: The Top Bar stretches edge-to-edge across the browser window.
Device Visibility
You can choose exactly which devices should display the Top Bar. Use the dropdown to:
- Show on All Devices
- Hide on Mobile
- Hide on Tablet
- Hide on Mobile and Tablet
2. Top Bar Widgets
The Top Bar is built using a flexible widget system. You can place widgets on the Left or Right side of the bar.
How to add content:
- Under the Top Bar Widgets section, click the Add Widget button.
- Choose from the available widgets:
- Text: Perfect for phone numbers, email addresses, or short announcements. (Supports HTML and Dynamic Strings!)
- Nav: Add a secondary navigation menu (you must assign a menu to the Top Bar location in Appearance → Menus).
- Socials: Display social media icons. You can choose between Minimal or Rounded styles.
- Once added, you can click the down arrow on the widget to configure it (e.g., adding your phone number).
Widgets Separator
If you add multiple widgets to the Top Bar, you can place a stylish divider between them:
- None: No separator.
- Regular: A straight vertical line.
- Slanted: An angled separator line.
3. Design Options
Scroll down to the Design Options section to style the Top Bar to match your brand.
Background
- Solid Color: Set a flat background color (often a dark color or your primary brand color looks best here).
- Gradient: Apply a color gradient.
Font Color
- Text Color: The color of standard text (like your phone number).
- Link Color: The color of any clickable links.
- Link Hover Color: The color links change to when hovered over.
Border
Add separation between the Top Bar and the Main Header below it by adding a Bottom border. You can define the Style, Color, and Width. If you used Widget Separators (above), you can also set the Separator Color here.
Saving Your Changes
Once your Top Bar is configured, click the blue Publish button at the top of the Customizer.