Sub-Header & Breadcrumbs

The sub-header area appears below your main header and typically displays the page title and breadcrumb navigation. This helps visitors understand where they are on your site and how to navigate back.

Sub-header and breadcrumb configuration in the Customizer

What You Can Do

With BuddyX Pro’s sub-header settings, you can:

• Display page titles in a dedicated area
• Show breadcrumb trails for navigation
• Add background images or colors
• Customize typography and alignment
• Control visibility on different page types

Understanding the Sub-Header

The sub-header is the horizontal bar between your main navigation and your page content:

┌─────────────────────────────────────────────────┐
│ [Logo]          Main Navigation Menu            │  ← Header
├─────────────────────────────────────────────────┤
│        Home > About Us > Our Team               │  ← Breadcrumbs
│              Our Team                           │  ← Page Title
│    (optional background image or color)         │
├─────────────────────────────────────────────────┤
│                  Page Content                   │

Enabling the Sub-Header

1. Go to Appearance > Customize
2. Click on Header > Sub-Header / Breadcrumbs
3. Switch Enable Sub-Header to Yes
4. Configure your settings
5. Click Publish

Page Title Settings

Display Options

Setting	Options
Show Page Title	Yes / No
Title Position	Left, Center, Right
Title Size	Small, Medium, Large, Extra Large

Title Typography

Setting	Description
Font Family	Match site fonts or choose different
Font Weight	Light, Normal, Bold
Font Color	Match your design
Text Transform	Normal, Uppercase, Capitalize

Breadcrumb Navigation

Breadcrumbs show the path from homepage to current page:

Example: Home > Products > Electronics > Smartphones

Breadcrumb Settings

Setting	Options
Show Breadcrumbs	Yes / No
Breadcrumb Position	Above title, Below title, Left of title
Separator Style	Arrow (>), Slash (/), Dot (.), Custom
Home Icon	Show home icon instead of “Home” text

What Breadcrumbs Show

Page Type	Breadcrumb Example
Blog Post	Home > Blog > Category > Post Title
Product Page	Home > Shop > Category > Product Name
Archive Page	Home > Category Name
Custom Page	Home > Parent Page > Current Page

Background Options

Background Style

Option	Description
Solid Color	Single color background
Gradient	Two-color gradient
Image	Photo or pattern background
Transparent	No background (content starts immediately)

Background Image Settings

Setting	Description
Image	Upload your background image
Position	Center, Top, Bottom
Size	Cover, Contain, Auto
Repeat	No repeat, Repeat, Tile
Overlay	Color overlay for readability
Overlay Opacity	How strong the overlay appears

Tip: Always use an overlay when placing text over images to ensure readability.

Per-Page Background

You can set different backgrounds for individual pages:

1. Edit the page in WordPress
2. Look for Sub-Header Settings in the page options
3. Upload a unique background image
4. The page will use this image instead of the global setting

Height & Spacing

Setting	Description	Typical Values
Sub-Header Height	Overall height	150-300px
Padding Top	Space above content	30-60px
Padding Bottom	Space below content	30-60px
Breadcrumb Margin	Gap between breadcrumbs and title	10-20px

Recommended Setups by Site Type

Corporate Website

Page Title: Center aligned, Large
Breadcrumbs: Below title, Arrow separator
Background: Solid brand color (dark)
Text Color: White
Height: 200px

Why: Professional appearance with clear navigation. Consistent branding across all pages.

E-Commerce Store

Page Title: Left aligned, Medium
Breadcrumbs: Above title, small text
Background: Light gray (#f5f5f5)
Text Color: Dark gray (#333)
Height: 120px

Why: Compact design saves space for products. Breadcrumbs help shoppers navigate categories.

Blog/Magazine

Page Title: Center aligned, Extra Large
Breadcrumbs: Hidden (or subtle below title)
Background: Featured image with overlay
Text Color: White
Height: 250-350px

Why: Creates visual impact for each post. Title becomes a hero element.

Community Platform

Page Title: Left aligned, Medium
Breadcrumbs: Show with home icon
Background: Subtle gradient or solid color
Text Color: Match theme
Height: 150px

Why: Quick orientation for members navigating between profiles, groups, and activity.

Portfolio Site

Page Title: Center aligned, Large, Uppercase
Breadcrumbs: Hidden
Background: Transparent or minimal
Text Color: Dark gray
Height: 100px (minimal)

Why: Clean, minimal design lets portfolio work shine. Title is informational only.

Documentation Site

Page Title: Left aligned, Large
Breadcrumbs: Always visible, above title
Background: White or very light gray
Text Color: Dark
Height: 130px

Why: Breadcrumbs are essential for navigating documentation hierarchy. Clean, functional design.

Visibility Controls

Show/Hide by Page Type

Page Type	Common Setting
Homepage	Usually hidden
Blog Posts	Show (with post title)
Pages	Show
Shop/Products	Show (compact)
Archives	Show (with category title)
Search Results	Show (with search term)

Hide Sub-Header on Specific Pages

1. Edit the page
2. Find Page Layout Settings
3. Toggle Hide Sub-Header to Yes
4. Update the page

This is useful for landing pages where you want content to start immediately.

What It Looks Like

Standard Sub-Header:

┌─────────────────────────────────────────────────┐
│ [Light gray background]                         │
│        Home > Services > Web Design             │
│              Web Design Services                │
│                                                 │
└─────────────────────────────────────────────────┘

Hero-Style Sub-Header:

┌─────────────────────────────────────────────────┐
│ [Background image with dark overlay]            │
│                                                 │
│            ABOUT OUR COMPANY                    │
│        Home > About Us                          │
│                                                 │
└─────────────────────────────────────────────────┘

Minimal Sub-Header:

┌─────────────────────────────────────────────────┐
│ Home > Products > Category        Product Name  │
└─────────────────────────────────────────────────┘

Mobile Display

On mobile devices:

Element	Mobile Behavior
Page Title	Smaller font size, may wrap
Breadcrumbs	Truncated if too long
Height	Reduced for screen space
Background Image	Repositioned for mobile

Tip: Keep page titles concise for better mobile display.

Common Questions

Should I show breadcrumbs? Yes, if your site has multiple levels of navigation. They help visitors and improve SEO.

Can I hide the sub-header on the homepage? Yes, this is common practice. Configure in customizer or use page-specific settings.

How do I change the breadcrumb separator? Look for “Separator Style” in breadcrumb settings. Common options include >, /, and custom text.

Will long titles break the layout? Very long titles will wrap to multiple lines. Consider using shorter titles or reducing font size.

Can I use different backgrounds for different pages? Yes, use the page editor to set custom backgrounds for individual pages.

Related Settings

• Header Layout Styles – Main header above sub-header
• Topbar Settings – Bar above main header
• Blog Settings – Post title display
• Site Layout – Overall layout options

---

Need Help?

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