Mobile Header

Your mobile header is what visitors see on smartphones and tablets. A well-designed mobile header makes navigation easy with limited screen space, ensuring a great experience for the majority of your visitors.

Header configuration options in the Customizer

Why Mobile Header Matters

• Over 60% of web traffic comes from mobile devices
• First impression on mobile affects engagement
• Easy navigation reduces bounce rates
• Mobile-friendly design impacts SEO rankings

What You Can Customize

With BuddyX Pro’s mobile header settings, you can:

• Choose mobile-specific header layouts
• Configure the hamburger menu style
• Control which elements appear
• Set mobile logo and sizing
• Customize the mobile menu panel

Accessing Mobile Header Settings

1. Go to Appearance > Customize
2. Click on Header > Mobile Header
3. Configure your settings
4. Preview using the mobile/tablet icons at the bottom
5. Click Publish

Mobile Header Layout

Layout Options

Layout	Description
Logo Left, Menu Right	Logo on left, hamburger icon on right
Logo Center, Menu Left	Centered logo, hamburger on left
Logo Center, Split	Logo centered, icons on both sides

Most Popular: Logo Left, Menu Right – familiar pattern users expect.

Mobile Header Height

Setting	Recommended
Header Height	60-70px
Logo Area	Proportional to height
Touch Targets	At least 44px for icons

Mobile Logo

Using a Different Logo

Upload a mobile-specific logo that works better on small screens:

1. Go to Site Identity
2. Find Mobile Logo
3. Upload your mobile-optimized logo
4. Click Publish

Tips for Mobile Logos:

• Use simpler version (icon or abbreviated)
• Horizontal logos work well
• Ensure readability at small sizes
• Consider logo mark only (without text)

Logo Sizing

Setting	Description
Max Width	Limit logo width (e.g., 120px)
Height	Usually auto based on width
Padding	Space around logo

Hamburger Menu Icon

The “hamburger” menu (three horizontal lines) opens your navigation:

Icon Styles

Style	Description
Classic Lines	Three horizontal lines
Animated	Transforms to X when open
Dots	Three dots (vertical or horizontal)
Custom	Use your own icon

Icon Placement

Position	Best For
Right Side	Most common, right-handed users
Left Side	Alternative, near logo

Icon Appearance

Setting	Options
Icon Color	Match header text color
Icon Size	20-30px typical
Background	None, circle, square
Border	Optional outline

Mobile Menu Panel

When visitors tap the hamburger icon, a menu panel opens:

Panel Styles

Style	Description
Slide from Right	Panel slides in from right edge
Slide from Left	Panel slides in from left edge
Full Screen Overlay	Menu covers entire screen
Dropdown	Menu drops down below header

Panel Contents

Element	Options
Logo	Show/hide at top of panel
Search Bar	Include search field
Main Menu	Primary navigation links
Social Icons	Links to social profiles
Close Button	X icon to close panel

Menu Behavior

Setting	Options
Submenu Toggle	Tap to expand submenus
Animation	Slide, fade, accordion
Background	Solid color, blurred backdrop
Overlay	Dim page content when open

Mobile Header Elements

Which Icons to Show

Space is limited on mobile. Prioritize essential icons:

Priority	Elements
High	Menu toggle, Cart (for stores)
Medium	Search, User/Profile
Low	Notifications, Dark mode

Icon Bar Layout

[Logo]                    [Search] [Cart] [Menu]

Or:

[Menu]          [Logo]              [Cart]

Recommended Setups by Site Type

E-Commerce Store

Layout: Logo Left, Menu Right
Icons: Cart (with count) + Menu
Menu Style: Slide from Right
Panel Contents: Search + Categories + Menu + Account
Logo: Icon version or abbreviated

Why: Cart access is critical; search in menu panel helps find products.

Community Platform

Layout: Logo Center, Split
Icons: Menu (left), Notifications + Messages (right)
Menu Style: Full Screen Overlay
Panel Contents: Logo + Search + Navigation + Profile Link
Logo: Icon only

Why: Quick access to notifications; full-screen menu for extensive navigation.

Blog/Magazine

Layout: Logo Left, Menu Right
Icons: Search + Menu
Menu Style: Slide from Left
Panel Contents: Search (prominent) + Categories + Recent Posts
Logo: Text logo or icon

Why: Search prominence helps readers find content; categories in menu for browsing.

Corporate Website

Layout: Logo Left, Menu Right
Icons: Menu only
Menu Style: Full Screen Overlay
Panel Contents: Logo + Main Menu + Contact Button
Logo: Standard logo (scaled)

Why: Clean, professional appearance; prominent contact CTA in menu.

Online Course Platform

Layout: Logo Left, Menu Right
Icons: User Avatar + Menu
Menu Style: Slide from Right
Panel Contents: Search + Courses + My Dashboard + Progress
Logo: Icon version

Why: Quick dashboard access; course search for students.

Portfolio Site

Layout: Logo Center, Split
Icons: Menu (left), Social icons (right)
Menu Style: Full Screen Overlay (animated)
Panel Contents: Large menu text + Social links
Logo: Name/signature style

Why: Creative, unique presentation; social links for connecting with artist.

Mobile Menu Animation

Opening Animation

Animation	Effect
Slide	Panel slides into view
Push	Page content pushes aside
Fade	Gradual appearance
Scale	Grows from icon

Closing Animation

Method	User Action
X Button	Tap close icon
Tap Outside	Tap the dimmed area
Swipe	Swipe panel away
Menu Icon	Tap hamburger again

What It Looks Like

Mobile Header:

┌─────────────────────┐
│ [Logo]         [≡]  │  ← Header with hamburger
├─────────────────────┤
│                     │
│    Page Content     │
│                     │

Mobile Menu Open (Slide from Right):

┌─────────────────────┐
│ [Logo]      │ [X]   │
│  (dimmed)   │ Home  │
│             │ About │
│             │ Serv  │
│             │ Blog  │
│             │ Conta │
│             │       │
│             │ [Sear │
└─────────────────────┘

Mobile Menu Open (Full Screen):

┌─────────────────────┐
│        [X]          │
│                     │
│        Home         │
│        About        │
│        Services     │
│        Blog         │
│        Contact      │
│                     │
│   [Search Bar]      │
│   [Social Icons]    │
└─────────────────────┘

Testing Your Mobile Header

Preview Methods

1. Customizer Preview: Use responsive icons at bottom
2. Browser DevTools: Press F12, toggle device mode
3. Real Devices: Test on actual phones/tablets

What to Check

Check	Why It Matters
Logo visibility	Can users identify your brand?
Touch targets	Are icons easy to tap?
Menu navigation	Can users find all pages?
Submenu access	Do dropdowns work on touch?
Load speed	Does header appear quickly?

Common Questions

Should my mobile logo be different? Often yes – simplified versions work better on small screens. But keep brand recognition.

Why isn’t my menu closing when I tap outside? Check “Close on Outside Click” setting in menu panel options.

Can I show different menu items on mobile? Create a separate menu for mobile in Appearance > Menus, assign to Mobile Menu location.

How do I test on different devices? Use browser developer tools (F12) or actual devices. Also try services like BrowserStack.

My hamburger icon is hard to see. How do I fix it? Increase icon size, add a background circle, or change icon color for better contrast.

Related Settings

• Header Layout Styles – Desktop header options
• Header Elements – Icons in header
• Sticky Header – Mobile sticky options
• Topbar Settings – Hide topbar on mobile

---

Need Help?

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