How to make Ultimate Addons for Elementor – Sticky Header On Scroll Documentation

Overview

The Sticky Header feature lets you keep important header elements like your logo, navigation menu, and call-to-action buttons always visible as users scroll. This ensures better accessibility and smoother navigation, leading to improved user engagement and a more professional browsing experience across all devices.

How It Works

When you enable the Sticky Header functionality, the header will automatically become “sticky” once the user scrolls past its original position. This is achieved by applying smart scroll behavior that keeps the header visible without interrupting the content flow. You can also customize its appearance, animation, and visibility on different devices to match your website’s design and performance needs.

Plugin Installation

To use the Sticky Header feature, make sure you have the required plugins installed:

• Ultimate Addons for Elementor Lite – Free plugin that provides the base widgets and integration features.
• Ultimate Addons for Elementor Pro – Required to unlock Sticky Header and other advanced functionalities.

Once both plugins are installed and activated, you can proceed with header creation and enabling sticky behavior.

Setting Up a Sticky Header

Step 1: Create a Header with Header Footer Elementor Plugin

• Navigate to UAE → Header & Footer.
• Click Add New to create a new header template.

• Give your header a name (e.g., Main Site Header).
• Select Type: Header from the dropdown.

• Select where you want to display the header using the Display Rules setting. Choose where the header should appear (e.g., Entire Website or specific pages) using Exclusion Rule.
• Display the Sticky Header based on User Roles.
• Enable Layout for Elementor Canvas Template to display this layout on pages using Elementor Canvas Template.

• Click Edit with Elementor to design your header.

Step 2: Design Your Header

• Use Elementor’s drag-and-drop editor to build your header.
• Add elements like logos, menus, buttons, and social icons.
• Style the header to match your site’s branding.

Step 3: Enable Sticky Header Functionality from UAE Pro

• While editing your header in Elementor, select the outer section or container.
• Open the Advanced tab in the sidebar.
• Scroll down to find the UAE – Sticky Header panel.
• Toggle Enable Sticky Header to On.

Step 4: Configure Sticky Header Settings

Basic Settings:

• Visibility: Select which devices will show the sticky header (Desktop, Tablet, Mobile).
• Scroll Distance: Enable this to hide the header while scrolling down and show it while scrolling up.

Visual Effects :

• Transparent Header: Enable transparency for the header after it becomes sticky.
• Background Color: Set the background color that appears after the header becomes sticky.
• Bottom Border: Add a bottom border to the sticky header for better visual separation from the page content. Customize width and color.
• Drop Shadow: Enable and style a shadow behind the sticky header.
  • Vertical: Controls shadow position vertically.
  • Blur: Adjusts the blur amount of the shadow.
  • Spread: Controls how far the shadow spreads.
  • Shadow Color: Choose a color for the shadow.
• Advanced Behavior: Automatically hides the sticky header when scrolling down and shows it again on scroll up.
• Hide Threshold: Set the scroll distance before the sticky header hides.

Conclusion

The Sticky Header feature in Ultimate Addons for Elementor offers a smooth and accessible navigation experience for your users. Follow this guide to design a reliable, high-performance sticky header for your website.

Need help? Reach out to our support team or explore more articles in our knowledge base.