In this video, I will show you, How you can make Astra header sticky on scroll without any plugin.
Now, let's take a look at our final sticky header feature.
First of all, I have created two versions of this sticky header.
The first version is a transparent sticky header before scrolling, and after scrolling, it will automatically convert into a sticky header with the solid colored background having a shadow effect.
Furthermore, It will also animate from before scroll status to after scroll status.
The second version has all the features of the first version, and additionally, it has a background image with color overlay, and as well as menu item color transition from black to white.
In this video, I will be majorly focussing on making transparent header sticky on scroll with a background and transition animation.
The amazing thing is that you can apply this Astra header tutorial in Astra free theme as well as Astra pro theme because I have created an advanced Astra header feature in Astra free theme without any additional plugin.
After watching this video, you will be able to:
🔴Create Astra Sticky header.
🔴 Make transparent sticky header on scroll.
🔴 Set background image with color overlay.
🔴 Apply shadow effect in Astra header.
🔴 Animate Astra header on scroll.
00:00 - Intro.
01:06 - Plugin installation.
01:52 - Adding Custom jQuery.
02:33 - Creation of sticky header with background image.
07:47 - Creation of white sticky header.
08:19 - Explanation of jQuery code.
----------------------------------------------------------------------------------------------------------------------------------------
Credits:
1-Bird Sound: goo.gl/mPCoeJ
2-Woosh sound:mixkit.co
3-Vector image: www.freepik.com
#sticky_header #Astra_theme #prowebmentor
Негізгі бет Ғылым және технология 🔴 How To Make Transparent Header Sticky On Scroll With Astra Theme 2021
Пікірлер: 54