How to Create a Transparent Sticky Header in WordPress with Elementor


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

Share this post

Share on facebook
Share on twitter
Share on email