Sticky Header

A sticky header stays visible at the top of the screen as visitors scroll down your page. This keeps your navigation accessible at all times, making it easier for people to explore your site.

Sticky header configuration options in the Customizer

What You Can Do

With BuddyX Pro’s sticky header feature, you can:

Keep your menu visible while scrolling
Choose when the header becomes sticky
Use a different (smaller) logo for the sticky version
Customize sticky header colors
Enable smooth scroll-triggered animations

Enabling Sticky Header

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

Now scroll down any page to see your header stick to the top.

Sticky Header Behavior

When It Activates

Option	What Happens
On Scroll Down	Header sticks after scrolling past a certain point
On Scroll Up	Header appears when scrolling back up (smart sticky)
Always	Header stays fixed from the start

Recommendation: “On Scroll Up” is popular because it gives readers more screen space while scrolling down, but shows the menu when they need it.

Scroll Threshold

Set how far visitors must scroll before the sticky header activates:

Setting	Typical Value
Scroll Distance	100-200 pixels
Trigger Point	When original header scrolls out of view

Sticky Header Appearance

Size Changes

Your sticky header can be more compact than the original:

Element	Original	Sticky
Header Height	100px	70px
Logo Size	Full size	Smaller version
Padding	Normal	Reduced

This gives visitors more content viewing area while still providing navigation access.

Sticky Logo

Upload a separate logo optimized for the sticky header:

Go to Site Identity
Find Sticky Header Logo
Upload a smaller or simpler version of your logo
Click Publish

Tips:

Use a more compact version of your logo
Horizontal logos work well in sticky headers
Consider icon-only versions for very compact sticky headers

Background & Colors

Setting	Options
Background Color	Solid color, transparent, blur effect
Background Opacity	0% (transparent) to 100% (solid)
Text/Link Colors	Can differ from original header
Shadow	Add subtle drop shadow for depth

Animation Effects

Entry Animation

How the sticky header appears:

Animation	Description
Slide Down	Drops in from top
Fade In	Gradually appears
None	Instant appearance

Recommendation: Slide Down feels natural and draws attention to the sticky header without being distracting.

Transition Speed

Speed	Feel
Fast (0.2s)	Snappy, responsive
Medium (0.3s)	Smooth, balanced
Slow (0.5s)	Elegant, deliberate

Recommended Setups by Site Type

E-Commerce Store

Type: On Scroll Up (Smart Sticky)
Height: Compact (60-70px)
Background: Solid white with subtle shadow
Elements: Logo (compact) + Main Menu + Cart Icon

Why: Maximizes product viewing space; menu appears when customers scroll up to navigate or check cart.

Blog/Magazine

Type: On Scroll Up
Height: Minimal (50-60px)
Background: Semi-transparent with blur
Elements: Logo (icon) + Main Menu + Search

Why: Readers can focus on content; navigation available when needed without blocking reading experience.

Corporate Website

Type: On Scroll Down (Always after threshold)
Height: Standard (70-80px)
Background: Same as main header
Elements: Full menu mirroring original header

Why: Professional consistency; visitors always see company branding and can navigate easily.

Community Platform

Type: On Scroll Up
Height: Compact (60-70px)
Background: Solid with slight transparency
Elements: Logo + Main Menu + Notifications + User Avatar

Why: Members can quickly check notifications and access their profile while browsing activity feeds.

Landing Page

Type: Disabled or On Scroll Down
Height: Very compact (50px)
Background: Transparent until sticky, then solid
Elements: Logo + CTA Button only

Why: Keeps focus on content; sticky header reinforces primary call-to-action.

Portfolio Site

Type: On Scroll Up
Height: Minimal (50px)
Background: Transparent with blur effect
Elements: Logo (small) + Menu (icon/hamburger)

Why: Maximizes visual impact of portfolio pieces; clean, minimal header doesn’t compete with creative work.

Mobile Sticky Header

The sticky header works on mobile too:

Setting	Options
Enable on Mobile	Yes / No
Mobile Height	Usually more compact
Mobile Elements	Menu toggle + essential icons

Recommendation: Enable sticky header on mobile, but keep it very compact (50-60px) since screen space is limited.

What It Looks Like

Before Scrolling:

┌─────────────────────────────────────────────────┐
│ [LARGE LOGO]    Home  About  Services  Contact  │  ← Full Header
├─────────────────────────────────────────────────┤
│                                                 │
│                  Page Content                   │
│                                                 │

After Scrolling (Sticky Active):

┌─────────────────────────────────────────────────┐
│ [small logo]  Home  About  Services  Contact    │  ← Sticky Header
├─────────────────────────────────────────────────┤
│                                                 │
│                  Page Content                   │
│         (user is viewing this area)             │

Performance Considerations

Sticky headers are lightweight, but here are tips for best performance:

Tip	Benefit
Use CSS transitions	Smoother than JavaScript animations
Keep sticky header simple	Fewer elements = faster rendering
Avoid heavy images	SVG logos are best
Test on mobile	Ensure smooth scrolling on all devices

Common Questions

Will sticky header affect my SEO? No, sticky headers don’t impact search engine rankings. They improve user experience, which can indirectly help SEO.

Can I disable sticky header on certain pages? Yes, individual pages can have sticky header disabled through page settings or custom code.

Does sticky header work with transparent headers? Yes! You can have a transparent header that becomes solid when sticky. Great for hero images.

Why does my sticky header look different on mobile? Mobile sticky headers are often more compact by design to save screen space.

Can the sticky header have a different menu? By default, it shows the same menu. Showing different items requires custom development.

Related Settings

Header Layout Styles – Main header configuration
Header Elements – Icons in your header
Mobile Header – Mobile-specific settings
Topbar Settings – Topbar with sticky header

Need Help?

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