Skip to content
  • Dashboard
  • News & Blog
  • Toolbox
  • Knowledge Base
  • FAQ
  • Glossary
  • SOPs
  • Courses
  • L@TH
  • How To Videos
  • Dashboard
  • Wiki (KB)
  • Glossary
  • Basecamp
  • Slack
  • Google Drive
  • Live at the Hive
  • My Profile
  • Login|Logout
  • Dashboard
  • Wiki (KB)
  • Glossary
  • Basecamp
  • Slack
  • Google Drive
  • Live at the Hive
  • My Profile
  • Login|Logout

Search the Knowledge Base (Wiki)

All of the KB Articles listed here are publicly accessible and can be shared.

Divi

2

Elementor

4
  • Fixing: Elementor Page Looks Good in the Editor but Looks Unstyled on the Front End
  • Adding a Sticky Bar using Elementor Pro Only

Wordpress

2
  • Fixing: Elementor Page Looks Good in the Editor but Looks Unstyled on the Front End
  • Home
  • Docs
  • MarTech (Web & Stack)
  • Elementor
  • Adding a Sticky Bar using Elementor Pro Only
View Categories

Adding a Sticky Bar using Elementor Pro Only

2 min read

To add a sticky bar at the bottom of every page in Elementor Pro without affecting the current site footer (so both appear simultaneously), follow these steps:

1. Create a Sticky Bar Section #

  1. Open Elementor Theme Builder:
    • Go to Templates > Theme Builder in your WordPress dashboard.
    • Click on Add New Template and select Section.
  2. Design the Sticky Bar:
    • Add a new section and design your sticky bar using widgets like text, buttons, or images. For example:
      • Add a call-to-action (CTA) button.
      • Include links to promotions or important announcements.
    • Style the section with background colors, padding, or borders to make it visually distinct.
  3. Set Position to Sticky:
    • Select the section by clicking on the six-dot icon.
    • Go to Advanced > Motion Effects in the Elementor panel.
    • Under the “Sticky” option, choose Bottom from the dropdown menu.
    • Set the sticky behavior for specific devices (desktop, tablet, mobile) as needed.
  4. Adjust Z-Index:
    • In the same Advanced tab, set a high Z-Index (e.g., 9999) to ensure the sticky bar appears above other content on the page.
  5. Save as a Global Template:
    • Save this section as a global widget or template so you can use it across all pages.

2. Add the Sticky Bar to Every Page #

  1. Use Display Conditions:
    • After designing the sticky bar, click on Publish.
    • Set display conditions to show it on Entire Site, ensuring it appears on all pages.
  2. Ensure Footer Visibility:
    • Since this sticky bar is positioned as “fixed” at the bottom of the browser window, it will not interfere with your existing footer. Both will be visible simultaneously:
      • The sticky bar remains at the bottom of the viewport.
      • The footer remains part of your page layout and scrolls naturally.

3. Optional: Add Dismiss Button (Close Icon) #

To make the sticky bar more user-friendly:

  1. Add an Icon widget (e.g., an “X” for closing) inside your sticky bar.
  2. Use custom CSS or JavaScript to hide the sticky bar when users click on the close icon:
<script> document.querySelector('.close-button').addEventListener('click', function() { document.querySelector('.sticky-bar').style.display = 'none'; }); </script>

Replace .close-button and .sticky-bar with your actual class names.

elementor, web dev
Was this helpful? Let us know so we can improve!
Share This:
  • Facebook
  • X
  • LinkedIn
  • Pinterest
Updated on November 27, 2024
Fixing: Elementor Page Looks Good in the Editor but Looks Unstyled on the Front End
What's Inside
  • 1. Create a Sticky Bar Section
  • 2. Add the Sticky Bar to Every Page
  • 3. Optional: Add Dismiss Button (Close Icon)

Let's Work Together and

Grow With Confidence

Get $150 In Free Google or Facebook Ads
Get Your Free PPC Audit

We Can Help You With...

  • Strategic Marketing
  • Digital Marketing
  • Business-to-Business Marketing
  • Search Engine Optimization
  • Local SEO
  • eCommerce
  • Web Development
  • Branding
  • Marketing Technology
  • Account Based Marketing
  • Google Ads
  • Social Media Management

By Industry

  • Health and Wellness
  • Local Services
  • Manufacturing
  • Professional Services
  • Software-as-a-Service
  • Manufacturing

By Industry

  • Logistics
  • Local Business Marketing
  • iGaming & Casino
  • Professional Services
  • Membership Site Marketing

Learn

  • Digital Marketing Learning Centre
  • The Digital Marketing Blog
  • About Us
  • Let's Talk Growth!

© 2004-2020 Honeypot Marketing Incorporated. All rights reserved.

Twitter Facebook Dribbble Youtube Pinterest Medium
Close

Notifications

  • All clear! What to do with all of this free time?