Header Layout Styles

BuddyX Pro offers four distinct header layout styles to match your website’s design requirements. Each layout provides a different arrangement of logo, navigation, and header elements.

The Site Header panel in the WordPress Customizer showing layout options

Accessing Header Settings

1. Go to Appearance > Customize
2. Navigate to Header > Header Layout

Available Header Layouts

Layout 1: Logo Left, Menu Right

The classic header layout with logo on the left and navigation aligned to the right.

Structure:

[Logo] .......................... [Primary Menu] [Icons]

Best For:

• Traditional business websites
• Corporate sites
• Most common layout expectation
• Sites with extensive navigation menus

Features:

• Logo positioned at far left
• Primary navigation aligned right
• Header icons (search, cart, notifications) after menu
• Clean, professional appearance

Layout 2: Logo Left, Menu Below

A two-row header with the logo on top left and navigation row below it.

Structure:

[Logo] ...................... [Header Icons/Search]
---------------------------------------------------
[Primary Menu - Full Width]

Best For:

• Large navigation menus (10+ items)
• Sites with prominent search functionality
• E-commerce sites with cart prominence
• Community sites with many navigation options

Features:

• Larger logo display area
• Full-width navigation bar below logo
• More space for header elements
• Clear visual hierarchy

Layout 3: Logo Center, Menu Below

A stacked layout with centered logo above centered navigation.

Layout 3 with centered logo and navigation menu below

Structure:

              [Logo]
---------------------------------------------------
         [Primary Menu - Centered]

Best For:

• Magazine-style sites
• Portfolio websites
• Blogs with strong branding
• Sites wanting maximum logo visibility

Features:

• Maximum logo prominence
• Centered visual balance
• Elegant, editorial feel
• Works well with horizontal logos

Layout 4: Logo Left, Menu Centered

A single-row layout with logo on the left and navigation menu centered in the header.

Layout 4 with logo on left and centered navigation menu

Close-up showing the centered menu alignment with logo and icons

Structure:

[Logo] ....... [Primary Menu - Centered] ....... [Icons]

Best For:

• Brand-focused websites
• Creative portfolios
• Sites wanting balanced visual appearance
• Modern, clean designs

Features:

• Logo positioned at left
• Menu items centered in available space
• Header icons on right
• Balanced, symmetrical look

Header Elements Configuration

Each layout supports configurable header elements:

Logo Settings

Setting	Description	Location
Logo Image	Primary logo upload	Site Identity
Logo Size	Width in pixels (150-300px)	Site Identity
Dark Mode Logo	Alternate logo for dark theme	Site Identity
Mobile Logo	Smaller logo for mobile	Site Identity

Navigation Settings

Setting	Description	Default
Primary Menu	Main navigation menu	Assigned in Menus
Menu Effect	Hover animation style	None
Dropdown Animation	Submenu reveal effect	Fade

Header Menu Effects

Add visual hover effects to your navigation menu items. Choose from four styles:

Effect 1: Dot indicator appears above the hovered menu item

Effect	Description	Best For
No Effect	Standard hover (color change only)	Minimal, clean designs
Effect 1	Dot indicator above menu item	Modern, subtle indication
Effect 2	Underline animation	Professional, corporate sites
Effect 3	Brackets around menu item	Creative, unique styling

Effect 3: Brackets appear around the hovered menu item [Members]

How to Change:

1. Go to Customizer > Header > Site Header
2. Find Header Menu Effects dropdown
3. Select your preferred effect
4. Preview by hovering over menu items
5. Click Publish

Header Icons

Configure which icons and elements appear in the header area.

Header icon toggles with all icons enabled showing in the header preview

Setting	Description	Default
More Menu	Collapse extra menu items into dropdown	Yes
Site Search	Show search icon in header	Yes
Site Search Style	Default or Fullwidth search bar	Default
Site Cart	Shopping cart icon (requires WooCommerce/FluentCart)	Yes
Friends Component	Friend requests icon (requires BuddyPress)	Yes
Messages Component	Private messages icon (requires BuddyPress)	Yes
Notifications Component	Bell notification icon (requires BuddyPress)	Yes
Site Login Link	Show login link for logged-out users	Yes
Site Register Link	Show register link for logged-out users	Yes
Login/Register Button Style	Icon+Text, Only Icon, Only Text, Icon Button, Text Button	Icon+Text

Sticky Header

Enable a fixed header that stays visible while scrolling.

Sticky header enabled – header remains fixed at top while page content scrolls

Setting	Description	Default
Enable Sticky Header	Fix header to top on scroll	Off
Sticky on Mobile	Also sticky on mobile devices	Off
Shrink on Scroll	Reduce header size when sticky	Off

Sticky Header Behavior:

1. User loads page – header displays normally
2. User scrolls down – header stays fixed at top
3. Content scrolls beneath the header
4. Optional: Header shrinks for more content space

Mobile Header

Header behavior automatically adapts on mobile devices:

Breakpoint	Behavior
Desktop (>1024px)	Full header layout
Tablet (768-1024px)	Simplified layout
Mobile (<768px)	Hamburger menu

Mobile Features:

• Hamburger menu toggle
• Collapsible navigation drawer
• Touch-optimized icons
• Mobile-specific logo option

Layout Comparison

Feature	Layout 1	Layout 2	Layout 3	Layout 4
Logo Position	Left	Left	Center	Left
Menu Position	Right	Below	Below Center	Centered
Rows	1	2	2	1
Logo Prominence	Medium	Medium	High	Medium
Menu Capacity	Medium	High	Medium	Medium
Best For	Business	Large Menus	Editorial	Modern/Balanced

Configuration Examples

Example 1: Corporate Website

Layout: Layout 1 (Logo Left, Menu Right)
Sticky Header: Enabled
Header Icons: Search only
Mobile: Hamburger menu

Example 2: Community Platform

Layout: Layout 2 (Logo Left, Menu Below)
Sticky Header: Enabled
Header Icons: Search, Notifications, Messages, Cart
User Menu: Enabled with avatar
Mobile: Side panel navigation

Example 3: Portfolio Site

Layout: Layout 3 (Logo Center, Menu Below)
Sticky Header: Disabled
Header Icons: None
Menu Items: Work, About, Contact
Mobile: Minimal hamburger

Troubleshooting

Menu Items Not Aligning Correctly

Problem: Navigation doesn’t align as expected in chosen layout.

Solutions:

1. Check menu is assigned to Primary Menu location
2. Verify no CSS conflicts from plugins
3. Clear caching plugins
4. Try a different layout temporarily to compare

Sticky Header Jumping

Problem: Content jumps when sticky header activates.

Solutions:

1. This is normal – space is reserved for the header
2. Enable “Shrink on Scroll” for smoother transition
3. Check for conflicting sticky plugins
4. Adjust body padding in custom CSS if needed

Header Elements Overlapping

Problem: Icons or menu items overlap on certain screen sizes.

Solutions:

1. Reduce number of visible header icons
2. Shorten menu item text
3. Use mobile breakpoints appropriately
4. Consider Layout 3 for more horizontal space

Related Documentation

• Header Elements & Icons – Configure header icons
• Sticky Header – Fixed header settings
• Mobile Header – Mobile-specific options
• Topbar Configuration – Above-header bar

---

Need Help?

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