Elementor Transparent Header On Scroll
Vložit
- čas přidán 2. 07. 2020
- Elementor Transparent Header On Scroll: the Ultimate tutorial! TIMESTAMPS BELOW - Get Elementor Pro: kaycinho.com/elementorpro (affiliate link)
In this video tutorial, I will show you how to create an Elementor transparent header on scroll. More precisely, we will be using Elementor Pro, without the need for other specific plugins.
AND AS A BONUS, I will also show you how to create a slick "blurry" effect for your fullscreen navigation modal!
COMPANION BLOG POST & CSS CODE:
kaycinho.com/elementor-pro-tr...
DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
kaycinho.com/brandingtemplate
ELEMENTOR NAVIGATION PLAYLIST:
• Elementor Navigation
OTHER LINKS:
- Wirementor demo (built by me): kaycinho.com/wirementordemo
- A2 Hosting (affiliate): kaycinho.com/a2hosting
TIMESTAMPS
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
ONE PAGE WEBSITE FREE COURSE
• Elementor Pro Tutorial...
ALL MY RECOMMENDED RESOURCES:
kaycinho.com/resources/
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!).
Also, I am the creator of Wirementor.
#elementor #elementorpro #navigation #webdesign #wordpress
Do YOU prefer using your theme navigation, or Elementor Pro?
Elementor Pro 💓
Thanks for this tutorial. ❤
@@mr.mahadi6326 Yeah: so much freedom :)
Thank you for this amazingly detailed Elementor Pro Header tutorial! I am going to tweak my site using everything I learned here.
Thank you so much! This is exactly what I was looking for. Your videos are great!
Glad it helped :) And thank you for your comment.
Amazing video! Exactly what I was looking for! Thanks alot!!
IMPRESSIVE! Thank you for this helpful video. Keep going ✌️
You're welcome! Thanks for watching :)
I wish to thank you for your excellent presentation. As a new user to Elementor, although with several years of general web experience, I was able to achieve the effects I was looking to incorporate along with the awesome pop-up. Having looked around for several options including some buggy extension plugins for Elementor this is indeed the best solution IMO, a great workaround for those header features lacking in Elementor.
I would like to contribute some code for a larger header on desktop and tablet that shrinks down on scroll, and a mobile header that was already smaller-Desktop + Tablet=200px high, mobile=100px high. Adding an extra .class to the navigation button and some transitions and done.
/* Background color on sticky */
.elementor-sticky--effects {
background-color:rgba(33,33,33,1);
transition: all 0.5s ease;
max-height: 100px!important;
}
/* Set initial logo size */
.my-logo img {
max-height: 110px!important;
width: auto!important;
transition: all 0.5s ease;
}
/* Set sticky logo size */
.elementor-sticky--effects .my-logo img {
max-height: 70px!important;
width: auto!important;
margin-top:-100px;
}
/* Set sticky menu button size */
.elementor-sticky--effects .menu-button {
transition: all 0.5s ease;
margin-top:-100px;
}
@media screen and (max-width: 600px) {
.elementor-sticky--effects .my-logo img {
margin-top:inherit;
}
.elementor-sticky--effects .menu-button {
margin-top:inherit;
}
}
thank you! you saved my day
You're welcome! Glad it helped :)
Very nice video you got there!
Thanks for watching! What is your favourite type of menu? Standard? Fullscreen?
Kay, great tutorial, thank you very much!
I have a great question, how can you completely hide the scrollbar on the right, I see that it also has a hover effect, if you can tell me if it is with code or through a plugin, thank you very much!
Great tutorial, Kay! Could you please add a safe area on top for which show-hide doesn't work, like 200px? Sometimes the menu hides after moving to the top of page. Thank you and all the best.
Great video as always! How do I do if I have onepage and anchor links. I tried to set margin 140px (my header -140px) it works but it looks not nice when scrolling (140px height space every section). Do have a better idea?
How do you make so that if the background was a light color and your logo is white? How do you swap the logo, when scrolling? From light to dark?
I haven't relied on themes for over a year now. Been using Elementor Pro and build everything out myself
The way to go!
Can you make auto hiding scrollbar with transparent background in elementor please? Great tutorial btw
how do you make your drop down header stop from going into two lines, whenever you shrink your browser window? I would like to keep everything in one line only, until the browser window reaches tablet size, then it changes into a hamburger.
I just used this on another site and client request for the menu to slide down gradually instead of suddenly. What should I add to the JavaScript code?
Love your video 👍 kay, what do use for the hero section bacground? Image or style the color? It made me curious. Love the hero bg. If you style it your own, please share the tips 😁🙏 thanks
Thanks Clement! Glad you enjoyed it. I actually created the whole hero background from scratch :)
I took the rumored new imac visual as inspiration + colors, then recreated the background and added gaussian blur. Then I used a computer mockup and used Photoshop magic to skew an ipad-like screen on top of the stand.
@@KayCinho wow could be your next tutorial? 😅🙏☕ Thanks. Because hero is important. Still looking for non generic hero but not too over look. High ctr hero 😁
Great Tutorial Kay! Does this work with Hello Theme? Thanks in advance!
Thanks for the kind comment! Glad you enjoyed the tutorial. It should work with Hello theme, although I haven't tried. But since it only cares about the Elementor Pro custom header it should work. Let me know how it works out if you try it.
Any way of avoiding that the header disappears when scrolling back to top on mobile?
Hey! Like your video :D
Hey, thanks for watching!
HY - does this code work with HELLO THEME too? THX
Haven't tried it but it should be completely theme independent. If you try it out let me know how that worked.
Thanks for the video, very informative! Unfortunately, the script code does not work for me on the mobile, when I scroll up the header just disappears, when I scroll down it's ok, but once I get to the top of the page again it disappears again. I also didn't manage to achieve the totally transparent effect, even though I watched this video twice and followed all steps... Any ideas why it's not transparent for me? Thanks for the hard work putting this video together :)
What did you end up doing to resolve the mobile issue?
@@KaitlynGilbert-fw5kd It never worked, tried everything :(
Great work! But finding the link for the CSS code was hard! Even the partner company name!? .. Could you please be so kind and add the link here!?
Thanks, glad you enjoyed it! Unless I misunderstood what you asked, the links are in the description.
The second piece of code seems to be missing from your blog post.
True! Should be fixed now.
I had to add the !important to get this first part of code to work .elementor-sticky--effects{ background-color: rgba(26,26,26,0.70) !important;
transition: background-color 2s ease !important; }
Also, thank you for this video. It was very helpful!
for some reason there is no transition on scroll. losing my mind trying to figure out why haha
when moving the site to live, it removed the elementor pro licence, which i fixed but the issue still persisted. So i went through the video again double checking everything and apparently the effects offset was set to the default again being 0.................. *bangs head against table
hi i was wondering is the effect in this website doable on elementor pro. i love your videos cause they are easy to follow and understand. heres the website: www.rotary.org/en (i am looking to recreate the effect seen under the hero image.)
I prefer your videos without that deep voice effect that you inject in each video
Fair enough ;-) Thanks for the feedback