🔴 How To Make Transparent Header Sticky On Scroll With Astra Theme 2021 скачать в хорошем качестве

🔴 How To Make Transparent Header Sticky On Scroll With Astra Theme 2021

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: https://goo.gl/mPCoeJ 2-Woosh sound:https://mixkit.co 3-Vector image: https://www.freepik.com #sticky_header #Astra_theme #prowebmentor