Creating Sticky Headers in Elementor Using Custom Code

Sticky headers are an excellent way to improve user experience by keeping your navigation menu accessible as users scroll down the page. While Elementor Pro offers built-in sticky header functionality, you can achieve the same result with custom code for more flexibility or if you're using the free version of Elementor.

In this guide, we’ll show you how to create a sticky header in Elementor using custom CSS and JavaScript.

Why Use a Sticky Header?

• Enhanced Navigation: Ensures the menu is always within reach.
• Better UX: Keeps key information, like contact buttons or branding, visible.
• Professional Look: Adds a polished feel to your website design.

Step 1: Create Your Header in Elementor

1. Go to Templates > Theme Builder > Header in your WordPress dashboard.
2. Design your header using Elementor.
3. Add a unique CSS class to the header section, e.g., custom-sticky-header.

Step 2: Add Custom CSS

To make the header sticky, add the following CSS to your Customizer or Elementor’s Custom CSS panel:

?

1 2 3 4 5 6 7 8 9 10 11

.custom-sticky-header {     position: sticky;     top: 0;     z-index: 9999;     background-color: #fff; /* Adjust based on your design */     transition: box-shadow 0.3s ease; }   .custom-sticky-header.sticky-active {     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

Explanation:

• position: sticky; keeps the header fixed at the top of the viewport.
• top: 0; ensures it sticks to the top.
• z-index: 9999; ensures the header stays above other elements.
• The .sticky-active class adds a shadow when the header becomes sticky.

Step 3: Add JavaScript for Sticky Effect

To dynamically apply the sticky-active class when the header becomes sticky, add the following JavaScript code:

?

1 2 3 4 5 6 7 8 9 10 11 12

document.addEventListener('DOMContentLoaded', function() {     const header = document.querySelector('.custom-sticky-header');     const offset = header.offsetTop;       window.addEventListener('scroll', function() {         if (window.scrollY > offset) {             header.classList.add('sticky-active');         } else {             header.classList.remove('sticky-active');         }     }); });

Explanation:

• This script detects when the header scrolls past its original position.
• It toggles the sticky-active class based on the scroll position.

Step 4: Test Your Sticky Header

Customize the query for Elementor’s Posts Widget to display specific content.

• Open your website and scroll to see the sticky header in action.
• Ensure it works on both desktop and mobile devices.
• Tweak the CSS and JavaScript for any adjustments.

Bonus: Smooth Scrolling for Sticky Headers

If you have anchor links in your sticky header, ensure smooth scrolling with this CSS:

?

1 2 3

html {     scroll-behavior: smooth; }

Wrapping Up

Creating a sticky header in Elementor using custom code is straightforward and offers endless customization possibilities. This approach works perfectly for users who prefer flexibility or are using the free version of Elementor.