Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    enter image description here

    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. */ 
}

    }

    *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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search