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 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).
• Hide on Scroll Down: Enable this to hide the header while scrolling down and show it while scrolling up.
• Animation: Choose from animation effects like Zoom or Shrink when the header sticks.

Styling Options:

• Border Bottom: Add a border below the sticky header.
• Border Color: Set the color of this border.
• Border Width: Define the border’s thickness in pixels.
• Box 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.
• Z-Index: Set the stacking order to ensure the header appears above other content.

Important: Sticky effects are visible on the live site during scrolling, so be sure to preview your page on the front end to see them in action.

Best Results

• Build with Intent: Design your sticky header to highlight important actions like navigation, contact buttons, or CTAs. A well-placed header keeps users engaged and improves conversions.
• Apply to the Outer Container: Always enable sticky functionality on the outermost section/container.
• Adjust Z-Index: Increase the z-index if the sticky header appears behind content.

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.