How to Create a Sticky Transparent Header

How to Create a Sticky Transparent Header

Create a cool sticky transparent header effect using Elementor’s CSS class.

You will learn how to:

  • Make your sticky header transparent
  • Use CSS to create an animation transition 
  • Change min-height when scrolling

  1. Go to Templates > Theme Builder > Header and edit your header template.
  2. Right-click the header’s section handle to edit the section.
  3. In the panel, go to Advanced > Motion Effects.
edit section

Advanced

Motion Effects

  1. Sticky: Click Top to choose to stick the header to the top. Other options include Bottom or None.
  2. Sticky On: Choose which devices to stick the header, including Desktop, Tablet, and Mobile.
  3. Offset: Set the number of pixels scrolled before the header becomes sticky.
  4. Effects Offset: Set the number of pixels scrolled before the header effects take place.

Note: The Offset Effects options only work when Custom CSS is applied.

Custom CSS

Add your own custom CSS here. Below is an example of CSS that changes the header’s background color, transparency, and height, with an easing animation effect. 

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

custom css

Note: This CSS will take effect when the user has scrolled the number of pixels specified in the Offset options.

Share it on social networks

Share on facebook
Share on twitter
Share on linkedin
Share on email

Did this answer your question?

255 people find it useful

Yes

No

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before