Swap headers on scroll in Elementor (PRO)
Vložit
- čas přidán 6. 09. 2020
- Swapping the page header on scroll became popular lately because it allows you to display the different content in the viewport top. It can be any type of content; maybe the secondary menu, the shopping cart, an action call, the banner ad - anything you can think of. The point is to grab the user's attention and make the room for displaying important information that would otherwise be taken by the main navigation. Learn how to easily swap two headers in Elementor PRO with just a few lines of the CSS code and zero JavaScript. Enjoy!
-------------------------------------------------- EXTRAS!
If you plan to buy Elementor PRO - buy from this link and help me keep this channel alive!
be.elementor.com/visit/?bta=1...
OoohBoi Steroids for Elementor plugin page:
wordpress.org/plugins/ooohboi...
Visit my Gumroad shop for more cool stuff:
gumroad.com/ooohboi
You might consider buying me a coffee if you find my work helpful for your business:
www.paypal.me/ooohboi
Download this tutorial Training File(s):
cutt.ly/9fQPIpf - Jak na to + styl
Very nice, very clever. I played with increasing the top transition time to 1s which obviously makes the entrance slower. Something to play with to taste. Thank y-Oooh so much!
This is something I have been praying for for months and months and now the gods have all listened and created a video through your channel.. amazing!!
There you go!
Wow you did it. Thank you so much for always listening. This I have been waiting for it.
Glad to read you found it useful. At last 🥺
wonderful tutorial, bro! ooooh boiiiii, always great content! thanks!
WOW!! This looks so simple compared to other tutorials. Great work!
Glad you think so!
The transition "top" wasn't working for me when scrolling up so I changed it to "all" and worked like a charm
For some reason the latest version of Safari doesn't understand the transition single properties. The same goes for "flex". I hope it's gonna be fixed with the next release!
you always offer a great content and ideas.
Love these tutorials! Happy to get new elementor licenses through your link!
That sounds cash 🤑 Thanks for watching!
Thank you so much for this! Really simple and educative, works so well!
You're very welcome!
You are explaining everything! Very useful, thank you!
Glad it was helpful!
Bro! i'm speachless! this is awesome!
Glad you like it!
Another awesome tuto !
Thx 🙏🏼 !
Genius! I love your solutions. They're sneaky, in a good way!
Glad you think so!
@@OoohBoi the Wizard of Elementor!
It's so useful and so well explained, thank you very much Oooh Boi, please keep going!
Glad you liked it!
Love this idea. Thanks for sharing!
Thanks for watching!
your tutorials are unique and very good. I loved i
Thanks for watching, glad to be helpful!
Amazing. Very clever and useful. Thank you
My pleasure, thanks for watching!
it is always a pleasure
OUTSTANDING!!
Perfect tutorial sir!
Thank you!
your stuff is really cool! thanks!
I appreciate that!
Ah man.. this is good stuff! Thanks! :D
Glad you like it!
that is fantastic video!! thank you so much!! i really want to watch more videos
Glad you enjoyed it!
Thank you!!
Thanks bro, you are my salvation !.
Happy to help and thanks for watching!
Oooh Boi, you are my hero. thanks for all the tutorials.
I'll buy you a beer every time we meet.
which is not impossible, because I am also from Croatia :-)
Opa, muzičar! I ja nekad davno svirao bubnjeve... javi kad si blizu Koprivnice.
@@OoohBoi dogovoreno! a ti nastavi sa ovim super tutorialima. najbolji si.
This is awesome!!! i wanted to ask you to convert the tutorial on "hiding header on scroll" to this, like 30 minutes ago :) and looking for it found this. Awesomeness
Glad it helped, thanks for watching!
Thank you!
Welcome!
Thank yo so much! any way to have this coupled with a 'hiding on scroll' then the 2nd header appear only when scrolling up?
I'd love to hear what you come up with :) Cheers mate! you are a legend!
Thanks!
No problem!
Thank you Boi
As always - thanks for watching!
Like before watching.
Hopefully you don't tend to pay stuff upfront as well 🤡 Just kidding! Thanks for watching!!
Nice tutorial! Very good thx for it. During the tutorial it sounds like you are sitting in a spaceship. It does not bother, it is just unusual. Beep beep, beam me up. 🙃
Thanks! And no worries, this is just the server room.
Hello! Great Tutorial! When apply your code it is ok, but i don´t understand why the hearder scroll in some pages stay behind the text or imagens. Can you help me? thanks
Great tutorial, many thanks!
Is there a way to have the sticky header display properly when a user is "logged" in and the WP Admin bar is 20px extra at the top of the screen? My sticky hides behind it because of top: 0 !important; selector. Thanks
It's only for logged in users! You can turn the admin bar off per user, see Users > Profile :: Show Toolbar when viewing site
You are great a man..
Can you plz let me know how to add featured woocommerce carousel on home page in wordpress. I used html code and products showing on grid but I need to display in carousel view
Thanks mate! ...however, I don't think that you can do products carousel by the default, you'll need some add-on. This one should be OK: wordpress.org/plugins/ecommerce-product-carousel-slider-for-elementor/
hello!! great tutorial, do you have a code snippet of the CSS you used?
All the CSS code that you need is in the training file!
Hey do you know how to do the line in the header what is like loading when you make scroll?
Did you mean "scrolling indicator"? If true, then that's the job for the GSAP and the ScrollTrigger.
Awesome video as always Oooh Boi! Please can you do a stick transparent header with shrink logo in ElementorPro. And how to fix the anchor links on onepage. I got a gap of 110px because my transparent header 110px height. Can I fix anchor with css, how?
I'll put your request on my list. As for how to fix the gap for anchored sections ... I'm not sure. At the moment I can tell that you gonna need JavaScript for something like that...
OoohBoi
Hello there!
First at all, Thank you!! your youtube channel is really helpfull for us.
I have an issue with my header, because in the desktop version, the droppable menu not show all submenu items, the submenu hide under the content.
Im using the elementor header builder. And Skelementor theme.
Sorry about my english, and i hope some help.
Thank you very much
Stay good!!
Solved!!! my header looks great!
There you go! Thanks for watching!
Thanks for this tutorial. 😊
What I still have not understood and found a solution .. It is the conditional transparent header.
For example on the home page it will be transparent, with white text, on single pages it will not be transparent with black text.
I have already thought about dynamic colors but it seems that it requires creating acf fields .. In any case I almost succeeded but it does not work on single templates ...
I saw this possibility offered with blocksy theme (free) and of course , no one on the web wanted to solve this big problem with elementor pro.😔
But you can have/create as many different headers (Header templates) in Elementor as you like! Use the "Display Condition" to define the particular header display location. As simple as that!
@@OoohBoi This is what I did first but we realize that managing and modifying two headers is not practical when we make changes. This method is too heavy for only colors and transparency. This is why the interest of having a single template. A template must contain the desktop and mobile version only 😊 I will try again with elementor 3.0 maybe it will work again this time
@@nemo6630 There's another CSS "trick" that you can rely on ... WordPress provides the custom class name ".home" to the BODY tag for the chosen static home page. How about using ".home" to style up your home page header?
@@OoohBoi I believe this CZcamsr czcams.com/video/b5_-LzAtN5A/video.html has exposed the problem and offers a solution but according to my tests it does not work on single templates it will perhaps be necessary to use the CSS method. But since it's conditional and dynamic it will be tricky maybe to manage with CSS? and also I'm not an expert in CSS
I just learned by watching your videos and many others all over the web 😊
I have a question and hope to find an answer. How to customize wordpress post taxonomies (categories or tags) to look like buttons using elementor at the single post template specially if the post have more than on taxonomy?
OMG, I'm trying to wrap my head around your question buddy, hope I'm not missing the point from now on...
If you dislike Elementor's default post layout/design on the archive/category template(s) then simply use "Ele Custom Skin" add-on for Elementor. It's just awesome for make-your-own layout.
Next, in order to be able to list more than just one custom post type on the single page, simply create new page in WordPress and edit with Elementor. Once in Editor, find the "Posts" widget, drag-and-drop to stage, chose Content tab, Query panel, then select the post type from the Source drop-down. Every "Posts" widget instance can list the different custom post type.
@@OoohBoi actually it's not what I mean. I will explain in more details. Suppose that I have a blog page that have posts from all categories. If I clicked on a post title it takes me to the post full content. This post has 2 categories or related to 2 categories for example men clothes and featured categories and also related to 5 tags for example men, shoes, leather, brown, men fashion
So I want these categories or tags to be displayed like buttons at the end of the post.
@@OoohBoi I don't mean at the single loop but I mean at the post full content page.
@@medodoha84 OK, I've got the point... well, in that case, you'll have to style up the regular anchor tag like the button ( for example css-tricks.com/css-basics-styling-links-like-boss/ ). Something like:
.tags a[rel="tag"] {
/* set of rules */
}
Are the training files still available for this? Every time I click the download link the page pops up but then disappears.
Just gave it a shot... it works just fine. Try with the different Browser.
NICE VIDEO, WHERES THE CSS CODE?
Great tricks ! thanks !! Where can I get your css code for this tuto?
The training file can be found in the description of this video - as usually. CSS included.
Oooh Boi thanks but i only see a jason file ... not a css file... 😓
@@OoohBoi thanks!
Training file seems to be deadlink...can you share again?
I just gave it a shot, it works, maybe the server was temporarily unavailable...
It looks nice fading in, but is abrupt when scrolling back up. Has anyone found a way via css to smooth the transition when scrolling back up?
So, the training file is not working for you, right? It's really strange how come the identical file scores different result across different machines...
Check out this video czcams.com/video/77BUOsY9kwA/video.html
@@colinh2203 Thank you! This worked for me.
Just as I was looking to replicate this effect from a site I saw that was using it..! You're a star :-)
After a lot of fiddling around to see why it wasn't quite working and my main header was always visible - I came to the realisation that you cannot have the main header as sticky as well...!
Your main header isn't either in the template....now I know :-).
Pls correct if I'm wrong - is there a way to have both sticky but make the main disappear on scroll??
Thank you!!!!
The fact that Header is a separate template doesn't change much, it gets "merged" with the rest of the content anyway when the page is rendered. As for the question of yours, you can style any sticky element only when Elementor assigns the custom class name to it (elementor-sticky--effects). It works dynamically (JS controlled) and represents some sort of the switch.
@@OoohBoi Thanks for your time and advice. Pls keep doing these tuts and we'll keep supporting them as much as we can!
:-)
hi, Can you made a Video for Install Mailchimp with Elementor free version? Thanks. I do not know how to do it. I installed a Plugin but is not working...
Are you looking for this one? docs.elementor.com/article/211-mailchimp
Oooh Boi Not with pro Elementor.... just the free version ... 😢
How to swap headers on scroll up only, please?
That's what is this tutorial about. Am I missing the point?
can you paste the code? the attached file is not opening
The attached file is importable JSON template. Importable by Elementor. Here's how to handle Elementor templates: wpdeveloper.net/elementor-templates/
Hey, great tutorial!
Does someone know how to do this in reverse?
Sticky Footer - reveal after scrolling and stay sticky at the bottom.
I tried to switch from Top ->
{
Bottom: ;
}
Also without CSS and only this applied to the Column/Element
-> Motion Effects > Sticky: Footer + Effect Offset: XY
didn't work :/
I guess it can be done but it's much trickier than what you described here ... for instance, your alternative footer should be visible all the time and only become hidden once the primary footer comes into view.
The training file doesnt open, it says virus (by Bitdefender pro)
Who is that Bitdefender? My NOD32 says No Viruses Found.
I want to hide the header in normal and show on scrolling..
This is the custom class name based, and the class gets assigned on scroll, so I'm not sure if it can work the other way round...
Hello sir, I am a big fan of yours. Your tutorial is very helpful. Thank a lot. I need your help sir. If I want to change the font-size of navbar menu items or like social icons. Could you please help me to how to do that? Please help me sir. Please sir, I am requesting you and looking for a positive response from your side.Thank a lot
I guess you'll need this: cutt.ly/FgIHJZn
@@OoohBoi Thank you so much sir
The Custom-CSS:
.header-2 {
top: -60px !important;
z-index: -1;
transition: top 0.3s ease, opacity 0.3s ease !important;
opacity: 0;
}
.header-2.elementor-sticky--effects {
top: 0 !important;
z-index: 1 !important;
opacity: 1;
}
Hey! The effect works brilliantly however, I've run into a problem. The space for the second header is still there and so when it's inserted as a header there's a gap between the header and the page content. Any way to fix that?
It shouldn't happen if you follow tutorial so obviously you've made a mistake at some point. Sometimes it's easier to start over than looking for mistakes tho...
@@OoohBoi I actually imported the training file and started modifying that. The training file also has that gap where the second header should be.
@@DanielRaghu Double checked right now and all looks fine. Nobody else mentioned the problem nor the gap and you can cleary see in the tutorial that I'm not faking anything. The problem you got is really weird mate...
@@OoohBoi thank you very much for looking into it. It's probably some configuration issue on my end. Will try it on a clean local installation. But in all seriousness, this is amazing! Thank you for constantly teaching us and pushing the boundaries of what can be done.
@@OoohBoi hey! I think the problem was because I was trying to use it as a header template. Anyway, I added some negative margin and that's solved the problem. Thanks so much for this! :)
Where is the code? download link isnt working
Please try again, it should be OK...
@@OoohBoi not working. paste the link here please
@@isuruwan23 I DOES WORK, I just tested for the third time. Maybe your browser doesn't allow downloads from the unsecured connection (HTTP instead of HTTPS). Use Firefox or Chrome.
".elementor-sticky--effects" this class dosent work on my site
How exactly it doesn't work? That very class is managed by Elementor and every sticky widget or element has it once it's stuck in the page top...
@@OoohBoi This has happened to all of my sites, this class is no longer applied when elements go sticky... might just be my version though
Znači, vodim te na piće kada se budem zadesio u ZG.
OK, samo meni treba kojih sat i pol do ZG
@@OoohBoi Sorry, mislio sam da si iz ZG. Odakle si, ako nije tajna?
@@vlada.bijanic Nije tajna, Koprivnica
css code plizz
You can download the training file with all the CSS code needed.
There is an issue with this - it adds a large white gap below the main header... even after following your steps 100%. I can also see this issue in your video
Could you make a video and demonstrate the problem? Thanks!
@@OoohBoi i fixed the issue..was quite simple... Basically you must specify the height of the header2 section..assume it is 80px in height. Now for the regular header, specify the bottom margin as -80px. This will make it perfect. Thanks.
SO awesome!! Curious how this looks on mobile? #mobilefirst2020
It looks awesome :)
Love the videos but the background noise is unbearable!
Thanks buddy!
.header-2 {
top: -60px !important;
z-index: -1;
transition: top 0.3s
ease !important;
}
.header-2.elementor-sticky
--effects {
top: 0 !important;
z-index: 1 !important;
}
The "top" value should be identical to the header height (negative!), right? Otherwise, thanks!
no work
Don't skip the video next time.
Only you can help me. how do i create a social border like this: www.squadracredit.com/ in elementor. Thanks in advanced !
Teo, 5 stars for the "social border" term! It sounds very natural in the time of Covid19. As for how to do it with Elementor - I don't have an idea. There's no "legal" way to position the Section one next to each other and I don't see another way of doing it, sorry mate!
@@OoohBoi Thanks My friend
and.... sorry for my poor english
This must have been broken since Elementor 3 as none of this works!?? Spent hours - and the training file has tons of irrelevant content?? Any ideas?
Here is how I got it to work:
selector {
z-index: -1;
transition: 300ms ease-in-out;
opacity: 0;
}
selector.elementor-sticky--effects {
top: 0 !important;
z-index: 1 !important;
opacity: 1;
}
And I added the negative margin on Elementor's Advanced tab.
@@fernandathiesen4825 Thank you so much! I’ll give it another go - but i am using an alternative now - thanks again
There's a great chance that you're using the Kadence WP theme ... Elementor and Kadence are not playing well together at all. Believe it or not, that theme doesn't allow you to use negative z-index in your custom CSS code. Try to switch to "Hello Elementor" and see whether everything works right.
@@OoohBoi I use the hello theme - no go, I'm afraid. I haven't tried this new code supplied here though. Please, please make the download the template for the header and working? When I download its just a ton of irrelevant content and no work file to be seen of this project above? I dont understand this - a bit frustrating esp when workin on a client's new website! Thank you!
@Rob Who rattled your cage? I
Yes, is something for pros
Don't like it
Oh cmon, don't you strive for the progress?