Header Elements & Icons

Add functional icons and elements to your header to improve navigation and user experience. These small additions help visitors quickly access key features like search, cart, and account settings.

Header icons configuration showing search, cart, notifications, and user elements

What You Can Add

BuddyX Pro lets you add these elements to your header:

Search icon for site-wide search
Shopping cart icon with item count
User account/profile icon
Notifications bell (for logged-in members)
Messages icon (for community sites)
Dark mode toggle switch

Enabling Header Elements

Go to Appearance > Customize
Click on Header > Header Elements
Toggle on the elements you want
Click Publish

Available Header Icons

Search Icon

Shows a magnifying glass icon that opens a search box when clicked.

Setting	Options
Enable Search	Yes / No
Search Style	Dropdown, Full-screen overlay, Slide-in

Best Uses:

Content-heavy sites with many posts
E-commerce stores
Knowledge bases or documentation sites

Cart Icon (E-Commerce)

Displays a shopping cart icon with the number of items. Requires WooCommerce or FluentCart.

Setting	Options
Enable Cart Icon	Yes / No
Show Item Count	Badge with number
Cart Drawer	Open drawer vs. go to cart page

Best Uses:

Online stores
Course platforms with cart functionality
Any site selling products or services

User Account Icon

Shows a profile icon for login/account access.

Setting	Options
Enable User Icon	Yes / No
Show Avatar	Display user’s profile picture
Dropdown Menu	Profile links when clicked

What Visitors See:

Logged Out: Login/Register links
Logged In: Profile, Account Settings, Logout

Notifications Bell

Displays a bell icon showing unread notifications count. Works with BuddyPress or BuddyBoss.

Setting	Options
Enable Notifications	Yes / No
Show Unread Count	Badge with number
Dropdown Panel	Recent notifications list

Best Uses:

Community sites
Social networking platforms
Any site with member activity

Messages Icon

Shows an envelope icon for private messages. Requires BuddyPress or BuddyBoss messaging.

Setting	Options
Enable Messages	Yes / No
Show Unread Count	Badge with number

Dark Mode Toggle

Adds a sun/moon icon to switch between light and dark modes.

Setting	Options
Enable Dark Mode Toggle	Yes / No
Default Mode	Light, Dark, or System

Icon Arrangement

Order & Position

You can arrange icons in any order:

Position	Best For
Far Right	Primary action (Search, Cart)
Near Logo	Account, Profile
Grouped	Related icons together

Icon Spacing

Setting	Description
Icon Size	Small, Medium, Large
Icon Spacing	Gap between icons
Icon Color	Match your header colors

Recommended Setups by Site Type

Online Store

Icons: Search + Cart + User Account
Order: Search, Cart (with count badge), User
Style: Medium icons, dropdown cart preview

Why this works: Customers can search products, see cart contents, and manage their account without leaving the page.

Community Platform

Icons: Search + Notifications + Messages + User
Order: Search, Notifications, Messages, User (with avatar)
Style: Show badges for unread items

Why this works: Members stay informed about activity and can quickly respond to messages.

Blog/Magazine

Icons: Search + Dark Mode Toggle
Order: Search on left, Dark Mode on right
Style: Large icons for easy access

Why this works: Readers can find content easily and choose their preferred viewing mode.

Online Course Platform

Icons: Search + Notifications + Cart + User
Order: Search, Notifications, Cart, User
Style: Show dropdown panels

Why this works: Students can search courses, track progress notifications, purchase new courses, and access their dashboard.

Corporate Website

Icons: Search only (optional)
Order: Far right of menu
Style: Minimal, icon only on hover

Why this works: Professional look without clutter; contact forms handle most interactions.

Membership Site

Icons: Notifications + Messages + User (with avatar)
Order: Notifications, Messages, User
Style: Show unread counts, avatar dropdown

Why this works: Members feel connected and can engage with the community easily.

Mobile Display

On mobile devices, header icons are handled differently:

Behavior	Description
Icon Bar	Shows in condensed row
In Menu	Moved inside mobile menu
Priority Icons	Only essential icons shown

Recommendation: Show only 2-3 icons on mobile to save space. Cart and user icons are usually most important.

What It Looks Like

Header with Icons:

[Logo]     Home  About  Services  Blog     [Search] [Cart 3] [Avatar]

On Hover/Click:

[Logo]     Home  About  Services  Blog     [Search box opens...]
                                           [Cart shows items...]
                                           [User dropdown shows...]

Styling Your Icons

Icon Colors

Light Header	Dark Header
Dark icons (#333)	Light icons (#fff)
Match menu text	Match menu text
Accent on hover	Accent on hover

Badge Styling

The notification/cart badges can be customized:

Setting	Recommendation
Badge Color	Your primary brand color
Badge Size	Small (not distracting)
Badge Position	Top-right of icon

Common Questions

Which icons should I enable? Only enable icons your visitors will actually use. A store needs cart; a blog might not.

Can I change the icon designs? Icons use a consistent style for visual harmony. Colors can be customized.

Will icons slow down my site? No, icons are lightweight SVGs with minimal impact on performance.

How do I hide icons for certain user roles? Some icons automatically show/hide based on login status. For advanced control, custom code may be needed.

Can I add custom icons? The built-in icons cover common needs. Custom icons require theme customization via child theme.

Related Settings

Header Layout Styles – Main header configuration
Sticky Header – Icons in sticky header
Dark Mode – Dark mode toggle settings
BuddyPress Integration – Community icons

Need Help?

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