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