Ecommerce Shopify WordPress Discussion

CSS in Elmentor

I know css but i don't understand why my custom CSS dosen't work in elementor. which selectors to use I don't understand can any one help me with making a sticky and tranparent header which becomes opaque and visible when scrolled down. I tried selectors like header{} but this just dosen't work for me.
If you want to create a sticky header that changes background color after scrolling, you can set the effects offset for the section where you want it to be sticky. Effects offset refers to the pixel at which the color change will begin. You can adjust these numbers to any values you prefer. After that, scroll down to the custom css section and using this code selector.elementor-sticky--effects{ background-color: rgba(0,0,0,1); /* You change to any color code you want. */ } Run code snippetExpand snippet } *Elementor will add elementor-sticky--effects class to the section after it reach the effects offset. If you are using Elementor, it is not necessary to use any specific class name unless you intend to use the section for JavaScript. You can simply use selector within custom CSS.

February 4, 2024

header{}: This selector only targets the native HTML <header> element, which might not be used by Elementor. Instead, try targeting the Elementor header section itself. You can find its unique class name in the Elementor editor panel under the 'Advanced' tab of the header section. For example, if the class name is 'elementor-header', your selector would be .elementor-header. To make the header sticky and transparent initially, combine the Elementor header class with the position: fixed; and background-color: transparent; properties. To gradually change the header's opacity as the user scrolls down, you can use JavaScript and the window.scrollY property. If you have Elementor Pro, you can utilize its built-in Sticky Header widget for easier implementation.

February 4, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.