Topbar Configuration

The topbar is an optional horizontal bar that appears above your main header. It’s perfect for displaying contact information, social links, announcements, or secondary navigation.

Topbar settings showing contact information on the left and social media icons on the right

What You Can Do

With BuddyX Pro’s topbar, you can:

Display important contact details (phone, email)
Show social media icons
Add a secondary navigation menu
Display announcements or promotional text
Customize colors to match your brand

Enabling the Topbar

Go to Appearance > Customize
Click on Header > Topbar
Switch Enable Topbar to Yes
Click Publish

You’ll see a new bar appear above your main header.

Topbar Content Options

Left Side Content

Choose what appears on the left side of the topbar:

Option	What It Shows
Text/HTML	Custom text like phone number or address
Menu	A secondary navigation menu
Social Icons	Your social media links
None	Leave this side empty

Right Side Content

Choose what appears on the right side:

Option	What It Shows
Text/HTML	Custom message or contact info
Menu	Secondary navigation links
Social Icons	Social media icon links
None	Leave this side empty

Adding Contact Information

To display your phone number or email:

Set left or right content to Text/HTML
Enter your information in the text field:
Click Publish

Tips:

Keep it short – topbar space is limited
Include only essential contact methods
Use separators (|) between items

Adding Social Icons

To display social media links:

Set left or right content to Social Icons
Go to Topbar > Social Links
Add your profile URLs:
Click Publish

Only icons for URLs you provide will appear.

Creating a Topbar Menu

For secondary navigation links:

Go to Appearance > Menus
Create a new menu called “Topbar Menu”
Add simple links (Login, Register, Help, Contact)
Set the menu location to Topbar Menu
Save

Then in customizer, set topbar content to Menu.

Topbar Colors

Color Scheme Options

Setting	What It Controls
Background Color	The topbar background
Text Color	Regular text and icons
Link Color	Clickable links
Link Hover Color	Links when mouse hovers

Recommended Color Combinations

Professional/Corporate:

Background: Dark gray (#333333)
Text: White (#ffffff)
Creates a strong contrast with a light header below

Friendly/Approachable:

Background: Your primary brand color
Text: White (#ffffff)
Adds a pop of color to the top

Subtle/Minimal:

Background: Light gray (#f5f5f5)
Text: Dark gray (#666666)
Blends gently with the page

Announcement/Sale:

Background: Bright color (red, orange)
Text: White
Draws attention to promotions

Recommended Setups by Site Type

Business/Corporate Site

Left: Text - "📞 (555) 123-4567 | Mon-Fri 9am-5pm"
Right: Social Icons (LinkedIn, Twitter)
Background: #2c3e50 (dark blue)
Text: #ffffff (white)

Community Platform

Left: Menu - Help, Guidelines, FAQ
Right: Social Icons (all platforms)
Background: Primary brand color
Text: #ffffff (white)

E-Commerce Store

Left: Text - "Free shipping on orders over $50!"
Right: Text - "📞 Customer Service: (555) 123-4567"
Background: #e74c3c (attention red) or brand color
Text: #ffffff (white)

Blog/Magazine

Left: Social Icons
Right: Text - "Subscribe to our newsletter"
Background: #f8f9fa (light gray)
Text: #333333 (dark gray)

Online Course Platform

Left: Menu - Courses, Pricing, Support
Right: Text - "🎓 10,000+ students enrolled"
Background: #27ae60 (green)
Text: #ffffff (white)

Mobile Display

On mobile devices, the topbar can be:

Option	Behavior
Show	Topbar visible on mobile (takes screen space)
Hide	Topbar hidden on mobile (saves space)

Recommendation: Hide on mobile unless the information is critical. Mobile screens have limited space.

What It Looks Like

With Topbar Enabled:

┌─────────────────────────────────────────────────┐
│ 📞 (555) 123-4567     [Facebook] [Twitter] [IG] │  ← Topbar
├─────────────────────────────────────────────────┤
│ [Logo]              Home  About  Services  Blog │  ← Main Header
├─────────────────────────────────────────────────┤
│                                                 │
│                  Page Content                   │

Without Topbar:

┌─────────────────────────────────────────────────┐
│ [Logo]              Home  About  Services  Blog │  ← Main Header
├─────────────────────────────────────────────────┤
│                                                 │
│                  Page Content                   │

Common Questions

Should I use a topbar? Use it if you have important secondary information. Skip it for cleaner, minimal designs.

Can I show different content on mobile? The topbar shows the same content, but you can hide it entirely on mobile.

Can I add HTML to the text fields? Yes, you can add links and basic HTML formatting.

Will the topbar affect my sticky header? The sticky header scrolls independently; the topbar stays at the top or scrolls away.

Related Settings

Header Layout Styles – Main header options
Header Elements – Icons and search in header
Site Identity – Logo settings

Need Help?

Visit our Documentation Portal
Contact Support at support@wbcomdesigns.com