Elementor pro transparent header on scroll: the Ultimate tutorial. Today, we’re going to build a modern and slick navigation, with Elementor Pro only
Subscribe to my YouTube Channel
DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).
Elementor pro transparent header on scroll: the Ultimate tutorial.
hello I’m your host Kaycinho, I’m the Digital Alchemist, and today, we’re going to build a modern and slick navigation, with Elementor Pro only, and with the following features:
So, I hope that you enjoyed this tutorial and can’t wait to see the slick and modern navigation you’re going to create with Elementor Pro!
Question of the day: what’s your favorite type of navigation? Please let me know in the comments!
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help me tremendously, and it doesn’t cost you anything!
Also, if you know someone that could benefit from it, please share it now.
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
- transparent header
- shrink the logo on scroll
- hide the header on scroll down
- reveal the header on scroll up
- hybrid navigation with a fullscreen navigation
- semi-transparent blurred background in the fullscreen navigation
Elementor Pro transparent header on scroll: Pre-requisites
In order to complete this tutorial, apart from of course WordPress and a WordPress theme (the free version of the Astra theme would do), you will need:Elementor Pro transparent header on scroll: the steps
This page would never end if we had to break down all the details, so I did better, and created a full length video tutorial which you can find at the top of this page. But in case you need a reference, here it is:- 0:15 – What we’re going to build
- 1:35 – Project Pre-requisites
- 2:43 – Creating the wp menu
- 3:34 – Creating the home page
- 4:04 – Creating the fullscreen navigation
- 7:53 – Creating the header
- 22:12 – Adding the shrink logo feature
- 27.36 – Adding the “hide on scroll down” feature
- 28:58 – Adding the blurry background fullscreen nav feature
Elementor Pro transparent header on scroll: Code
1. Transparent header + Logo shrink
From the original blog post of Ignite Web Design (direct link here)./* Background color on sticky */ .elementor-sticky--effects { background-color:rgba(0,0,0,0.70); transition: all 0.5s ease; } /* Set initial logo size */ .my-logo img { max-height: 50px!important; width: auto!important; transition: all 0.5s ease; } /* Set sticky logo size */ .elementor-sticky--effects .my-logo img { max-height: 40px!important; width: auto!important; }
2. Hide header on scroll
<script> var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-200px"; } prevScrollpos = currentScrollPos; }</script>
3. Blurring the fullscreen navigation
selector {backdrop-filter: blur(5px);}