How to Add Sticky Header or Sticky Buttons
WordPress Tutorials & How-To (Advanced)
How to Add a Sticky Header or Sticky Buttons in WordPress
A sticky header or sticky button stays visible even when users scroll down. It improves navigation, increases conversions, and enhances user experience. In this advanced guide, you’ll learn how to create sticky headers, sticky menus, floating CTA buttons, and custom sticky elements using Elementor, CSS, and plugins.
1
What Is a Sticky Header or Sticky Button?
Elements that remain fixed while scrolling.
A sticky header is a website header that stays on top of the page even when the user scrolls down.
A sticky button is a floating or fixed button that stays visible—a perfect CTA for:
- WhatsApp chat
- Call now button
- Buy now link
- Cart or checkout
- Book appointment
Sticky elements significantly increase clicks and conversions.
2
Method 1 — Create a Sticky Header in Elementor
The most powerful and flexible method.
Step 1 — Create/Edit Header Template
- Go to Templates → Theme Builder
- Edit your Header
Step 2 — Make the Section Sticky
- Select the header section
- Go to Advanced → Motion Effects
- Enable Sticky → Top
- Set Devices → Desktop / Tablet / Mobile
Step 3 — Add Effects (Optional)
- Fade in on scroll
- Shrink header height
- Add background color on scroll
This creates a professional sticky header instantly.
3
Method 2 — Sticky Header Using CSS (No Elementor)
Add a simple CSS snippet to any theme.
Add this CSS in: Appearance → Customize → Additional CSS
/* Sticky header */
.site-header {
position: sticky;
top: 0;
z-index: 9999;
background: #ffffff;
}
Change .site-header to your theme’s header class (Astra, GeneratePress, etc.).
4
Method 3 — Sticky Header With Plugins
Good for non-Elementor themes.
Recommended plugins:
- myStickymenu
- Sticky Menu on Scroll
- WP Sticky
Steps:
- Install plugin
- Enter your header CSS ID (example:
#masthead) - Configure sticky position
- Save
Best for themes without a header builder.
5
Add Sticky Buttons (Floating CTA Buttons)
Essential for conversions on mobile websites.
Method 1 — Elementor Sticky Button
- Add a Button widget
- Go to Advanced → Motion Effects
- Enable Sticky: Bottom
- Set Z-index: 9999
This makes a bottom sticky button on scroll.
Method 2 — Floating Button With CSS
.floating-btn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
background: #ff5722;
color: #fff;
padding: 15px 25px;
border-radius: 50px;
}
Add this class to any button → It becomes a floating CTA.
Method 3 — WhatsApp / Call Sticky Button Plugin
- Join.chat
- WP WhatsApp Button
- Click to Call Button
Perfect for local businesses.
6
Create Sticky Navigation (Mobile Only)
Best for mobile UX.
Using Elementor Nav Menu Widget:
- Edit header with Elementor
- Select mobile menu section
- Advanced → Motion Effects
- Enable Sticky → Top
- Enable mobile only
Mobile sticky menus improve navigation significantly.
7
Sticky on Scroll Up (Smart Header)
Hide on scroll down → Show on scroll up.
Elementor Steps:
- Edit header section
- Advanced → Motion Effects
- Sticky → Top
- Sticky On Devices → All
- Enable Hide on scroll
- Enable Sticky on scroll up
This gives a professional UX like modern SaaS websites.
8
Troubleshooting Sticky Elements
Fix common problems easily.
1. Sticky Header Overlaps Content
- Add top padding to first section
- Add background color to sticky mode
2. Sticky Button Hidden Behind Elements
Increase z-index: 99999
3. Sticky Header Not Working on Mobile
- Enable sticky on mobile in Motion Effects
- Check conflicting plugins or custom JS
4. Sticky Jitter or Jumping
- Disable shrinking effect
- Reduce motion effects
- Check theme header duplication
Want Professionally Built Sticky Headers & CTAs?
All SiteCrafted premium websites include modern sticky headers, floating CTA buttons, and high-conversion mobile navigation layouts built with Elementor.
