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 https://docs.elementor.com/article/459-how-to-create-a-sticky-header

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