Elementor Pro Transparent Header On Scroll

Elementor Pro transparent header on scroll

Elementor Pro Transparent Header On Scroll

Elementor pro transparent header on scroll: the Ultimate tutorial. Today, we’re going to build a modern and slick navigation, with Elementor Pro only

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:
  • 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);}

Elementor Pro transparent header on scroll: your turn!

Elementor Pro transparent header on scroll 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 channelIt 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!

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
>
Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

Cookies essentials to the navigation on this website.

Cookies used to remember your choices regarding privacy.

Decline all Services
Accept all Services

Join me on YouTube

subscribe & get exclusive tips to be your own boss

Brand, market

& grow online

​By subscribing you accept to receive my newsletter and occasional marketing offers. Unsubscribe anytime.

close
Scroll to Top

My Account

Featured

Check out the shop!

Subscribe to my newsletter