Animation Addons

Animation Addons

Header & Footer Widgets

How to Set Up a Sticky Header Without Conflicts

Estimated reading: 2 minutes 27 views

Setting up a sticky header with Animation Addons while using Elementor Pro motion effects might seem simple, but many users face conflicts.  If you’re using GSAP smooth scrolling from Animation Addons, it can conflict with Elementor’s sticky header, causing overlapping content or glitches. 

To avoid this, disable smooth scrolling, use Elementor’s sticky feature for the header, and keep GSAP animations for other elements only.

Afterward, test your pages to make sure the header stays in place and everything scrolls smoothly. 

In this guide, we’ll show you the easiest way to make a sticky header that works with Animation Addons and Elementor Pro. By following this guideline, your site will look polished and work perfectly for visitors while using Animation Addons and Elementor Pro together.

Requirement

  • Elementor Pro (Page Builder)
  • Animations Addons (Our Plugin)  

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start.

  • First, go to Animation Addons and click on ‘Theme Builder’. Then, click Header → Edit.
Unnamed 1
  • After clicking ‘Edit’, the template settings interface will open. Then, click ‘Smoother’, where you’ll see three options: Default, Yes, and No. Just select ‘No.
Unnamed 3
  • Once you select ‘No’, the OffsetY (px) option becomes available. Add your header height as the value.

For example, here it is set to 80px, which pushes the sticky header down so the content below is fully visible. However, you can adjust this value depending on your header height.

Finally, click on ‘Save Settings’.  

How to set up a sticky header without conflicts

You Did It 

Great job! You’ve successfully set up a sticky header in Elementor Pro that works seamlessly with Animation Addons. By disabling smooth scrolling for the header and using Elementor’s sticky feature with the correct OffsetY value, your header stays in place, content displays correctly, and other GSAP animations continue to run smoothly. 

Your site now looks polished, performs flawlessly, and gives visitors a seamless scrolling experience.

Share this Doc

How to Set Up a Sticky Header Without Conflicts

Or copy link

CONTENTS