How to create a sticky header

Crea un efecto de encabezado transparente pegajoso genial usando la clase CSS de Elementor.

You will learn to:

• Haz que tu encabezado adhesivo be transparent
• Use CSS to create an animation transition
• Change the minimum height when scrolling

1. Go Templates> Theme Builder> Header and edit your header template.
2. Right-click the section identifier in the header to edit the section.
3. On the dashboard, go to Advanced> Motion Effects.

Advanced

Motion effects

1. Sticky: Click Top to choose to paste the header at the top. Other options include Lower or None.
2. Sticky: Choose the devices to paste the header, including desktop, tablet, and mobile.
3. Make up for: Sets the number of pixels to shift before the header becomes sticky.
4. Effects compensation: Sets the number of pixels to shift before header effects occur.

Note: The Offset Effects options only work when custom CSS is applied.

Custom css

Add your own custom CSS here. Here is an example of CSS that changes the background color, transparency, and height of the header, with an anti-aliasing 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; }

Note: Este CSS tendrá efecto cuando el Username se haya desplazado el número de píxeles especificado en las opciones de Desplazamiento.