In this episode of Tips & Tricks, we’ll see how to create a cool sticky transparent header effect using Elementor’s new CSS class.
You will learn how to:
✓ Make your sticky header transparent
✓ Use CSS to create an animation transition
✓ Change min-height when scrolling
hey there welcome to tips and tricks
today we’ll go over the new sticky
features sometimes you don’t want a
plain old static header in this video
you’ll learn how to make your header
stand out more with some animation now
it’s possible to determine how the
sticky feature behaves when users scroll
that means you cannot effects an
animation to make your header much more
stylish but first subscribe to our
YouTube channel for more videos to take
your skills to the next level first
setup your sticky header in the
elementary ed etre in your header click
on the section in the panel go to
advanced and open the scrolling effect
choose sticky top or bottom
I need top select the devices you need
desktop mobile etc now go to offset here
you can move the header or any other
sticky element up or down in pixels the
offset effect lets you determine when
the effects or changes will occur
according to the scrolling distance and
pixels let’s set it to a hundred pixels
but you won’t see anything yet first we
need to add CSS in the CSS tab we’ll add
a new CSS class that affects the
Elementor sticky the class name is
effects so let’s add some CSS here I’ll
add a background color was 0.5 opacity
now don’t freak out you can copy the
code needed just below the video
description click publish and set your
conditions let’s preview what we did
looking good but we’ll also add a cool
animation to it so the menu bar will
scale down a bit when we scroll back to
our code here let’s add a min height of
again don’t panic you can find the CSS
code in the video description below
update and let’s check it out cool this
is amazing so try it out engage your
visitors more by adding effects to your
sticky elements and don’t forget
subscribe to our YouTube channel for
more fun videos
