help center

On this page

Create a Sticky Transparent Header

Last Update: January 14, 2024

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

Note
This CSS code will only work if you’re using sections and columns. If you’re using containers, learn more about creating headers with containers in Create a header template using Flexbox Container

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.
image 12 Create a Sticky Transparent Header 1

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: Pushes the sticky element up or down by pixels.
  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 2s ease !important; }

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

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

custom css
Sticky Create a Sticky Transparent Header 4

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

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article