Skip to main content


In this episode of Tips & Tricks, we’ll see how to create a cool sticky transparent header effect using Elementor’s new CSS class.

Link Tutorial

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; }


By Elementor Website Builder for WordPress

Leave a Reply