No video

Elementor Transparent Header On Scroll

  Рет қаралды 18,349

The Digital Alchemist

The Digital Alchemist

Күн бұрын

Elementor Transparent Header On Scroll: the Ultimate tutorial! TIMESTAMPS BELOW - Get Elementor Pro: kaycinho.com/e... (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/e...
DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
kaycinho.com/b...
ELEMENTOR NAVIGATION PLAYLIST:
• Elementor Navigation
OTHER LINKS:
- Wirementor demo (built by me): kaycinho.com/w...
- A2 Hosting (affiliate): kaycinho.com/a...
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/r...
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

Пікірлер: 48
@KayCinho
@KayCinho 4 жыл бұрын
Do YOU prefer using your theme navigation, or Elementor Pro?
@mr.mahadi6326
@mr.mahadi6326 4 жыл бұрын
Elementor Pro 💓
@mr.mahadi6326
@mr.mahadi6326 4 жыл бұрын
Thanks for this tutorial. ❤
@KayCinho
@KayCinho 4 жыл бұрын
@@mr.mahadi6326 Yeah: so much freedom :)
@HullioGQ
@HullioGQ 3 жыл бұрын
Thank you for this amazingly detailed Elementor Pro Header tutorial! I am going to tweak my site using everything I learned here.
@hodgsonhome4243
@hodgsonhome4243 3 жыл бұрын
Thank you so much! This is exactly what I was looking for. Your videos are great!
@KayCinho
@KayCinho 3 жыл бұрын
Glad it helped :) And thank you for your comment.
@Jebesniper
@Jebesniper 7 ай бұрын
Can you make auto hiding scrollbar with transparent background in elementor please? Great tutorial btw
@Jon-eh3uh
@Jon-eh3uh 3 жыл бұрын
Amazing video! Exactly what I was looking for! Thanks alot!!
@thisonehere2464
@thisonehere2464 3 жыл бұрын
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; } }
@fanmediamusic4128
@fanmediamusic4128 3 жыл бұрын
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.
@alfanputrap8448
@alfanputrap8448 3 жыл бұрын
Very nice video you got there!
@KayCinho
@KayCinho 3 жыл бұрын
Thanks for watching! What is your favourite type of menu? Standard? Fullscreen?
@mynameisapple3337
@mynameisapple3337 4 жыл бұрын
IMPRESSIVE! Thank you for this helpful video. Keep going ✌️
@KayCinho
@KayCinho 4 жыл бұрын
You're welcome! Thanks for watching :)
@sannalange9831
@sannalange9831 2 жыл бұрын
Any way of avoiding that the header disappears when scrolling back to top on mobile?
@fndesign1477
@fndesign1477 4 жыл бұрын
Great Tutorial Kay! Does this work with Hello Theme? Thanks in advance!
@KayCinho
@KayCinho 4 жыл бұрын
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.
@Elliewebd
@Elliewebd 3 жыл бұрын
thank you! you saved my day
@KayCinho
@KayCinho 3 жыл бұрын
You're welcome! Glad it helped :)
@YasienSarlie
@YasienSarlie 4 жыл бұрын
I haven't relied on themes for over a year now. Been using Elementor Pro and build everything out myself
@KayCinho
@KayCinho 4 жыл бұрын
The way to go!
@empachado69
@empachado69 4 жыл бұрын
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!
@clementyo4526
@clementyo4526 4 жыл бұрын
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
@KayCinho
@KayCinho 4 жыл бұрын
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.
@clementyo4526
@clementyo4526 4 жыл бұрын
@@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 😁
@zenithspectrum8956
@zenithspectrum8956 2 жыл бұрын
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!?
@KayCinho
@KayCinho 2 жыл бұрын
Thanks, glad you enjoyed it! Unless I misunderstood what you asked, the links are in the description.
@pellekarlsson152
@pellekarlsson152 3 жыл бұрын
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?
@AnthonyTilahun
@AnthonyTilahun 3 жыл бұрын
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?
@ew6371
@ew6371 3 жыл бұрын
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 :)
@KaitlynGilbert-fw5kd
@KaitlynGilbert-fw5kd Жыл бұрын
What did you end up doing to resolve the mobile issue?
@ew6371
@ew6371 Жыл бұрын
@@KaitlynGilbert-fw5kd It never worked, tried everything :(
@tommytornado6937
@tommytornado6937 4 жыл бұрын
HY - does this code work with HELLO THEME too? THX
@KayCinho
@KayCinho 4 жыл бұрын
Haven't tried it but it should be completely theme independent. If you try it out let me know how that worked.
@haroldgar12
@haroldgar12 3 жыл бұрын
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.
@HullioGQ
@HullioGQ 3 жыл бұрын
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?
@KaitlynGilbert-fw5kd
@KaitlynGilbert-fw5kd Жыл бұрын
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; }
@KaitlynGilbert-fw5kd
@KaitlynGilbert-fw5kd Жыл бұрын
Also, thank you for this video. It was very helpful!
@kylevandeusen
@kylevandeusen 4 жыл бұрын
The second piece of code seems to be missing from your blog post.
@KayCinho
@KayCinho 4 жыл бұрын
True! Should be fixed now.
@huddynz5979
@huddynz5979 Жыл бұрын
for some reason there is no transition on scroll. losing my mind trying to figure out why haha
@huddynz5979
@huddynz5979 Жыл бұрын
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
@ramonbullock6630
@ramonbullock6630 4 жыл бұрын
Hey! Like your video :D
@KayCinho
@KayCinho 3 жыл бұрын
Hey, thanks for watching!
@theodorereid6129
@theodorereid6129 4 жыл бұрын
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.)
@wgm247
@wgm247 3 жыл бұрын
I prefer your videos without that deep voice effect that you inject in each video
@KayCinho
@KayCinho 3 жыл бұрын
Fair enough ;-) Thanks for the feedback
Elementor Vs Divi 2020 vs... Best WordPress Theme Builder 2020?
29:27
The Digital Alchemist
Рет қаралды 2,4 М.
Why I Never Start In Figma, But Elementor Instead
20:37
The Digital Alchemist
Рет қаралды 15 М.
Идеально повторил? Хотите вторую часть?
00:13
⚡️КАН АНДРЕЙ⚡️
Рет қаралды 18 МЛН
Comfortable 🤣 #comedy #funny
00:34
Micky Makeover
Рет қаралды 17 МЛН
а ты любишь париться?
00:41
KATYA KLON LIFE
Рет қаралды 3,1 МЛН
Changing Headers On Scroll with Elementor Sticky Headers
11:11
Jeffrey @ Lytbox
Рет қаралды 133 М.
Back To Top Elementor Pro
10:49
The Digital Alchemist
Рет қаралды 13 М.
Show-hide Header on Scroll in Elementor PRO
6:17
Oooh Boi
Рет қаралды 74 М.
How to create a Transparent Sticky Header in WordPress with Elementor
10:13
How To Change Logos On Scroll With Elementor 2020
14:15
Jeffrey @ Lytbox
Рет қаралды 50 М.
8 Best Elementor Header Scrolling Effects - Sticky Menu, Transparent, Glass, Shrinking, Color Change
16:45
POSIMYTH Innovations - WordPress Tutorials
Рет қаралды 9 М.
Идеально повторил? Хотите вторую часть?
00:13
⚡️КАН АНДРЕЙ⚡️
Рет қаралды 18 МЛН