Man God bless you, you just saved me !!! i have been scrolling on youtube since two days now looking for this change of header effect, have watch countless videos and each time i don't get what i want i feel like crying
Deleted my website header yesterday by accident and had to redo it as fast as possible. THIS IS THE FASTEST video tutorial I have found. Give the man a medal!!
Excellent! Really creative, lean, beautiful and perfect idea. You have helped me solve something that has been bothering me for a long time. Thank you so much!
@@LytboxStudio Quick question.. I've added this feature and it works great however when I switch to mobile few it's not looking/work as great. any insight?
Hello! First of all thanks for the tutorial Jeffrey. You explain it very well :) I have done it and I have several issues in mobile. It works perfectly on desktop but on mobile there are different errors in Chrome and Safari. In the first the 2 headers overlap and in Safari when loading the page the header does not exist, only when you scroll down the second one appears and when you scroll up the first one appears. Thanks man! :)
I like the cam, so clearly. And the light of the room is awesome. So natural since I saw your dog so relax. I like this better than dark room 😁 anyway thanks for the header tips n tutorial
this is so helpful bro. I was in trouble to do this. after all it's done. thank you so much for your great video tutorial bro. appreciate more videos from you bro.
Thank you! GREAT tutorial! I only have an issue when i add a woocommerce cart menu. The side cart not working properly with the header-2 (white background). Do you have a solution for this? Thanks!
It's probably going to take a bit more CSS for the side cart. I'll try and update this but could take some time. I try and update all tuts with CSS once a month to keep up to date. I'll check the cart in the menu on the next update
Just tried it with the lastest elementor version. It works pretty great! only with the Fade out Css, but it all worked out changing the transition value from: opacity to all, and cutting the !important in the last statement. Thank you very much!
Hi, great job though a quick question - I have followed all your points in the video though when my site is loading from the getgo for a short period (a second or two) both logos overlap at the top - as the screen (even though they are aligned with Elementor as per your instructions using negative margin). The question is that as this very informative video was was made three years ago are there any updates i.e. the Safari bug you described etc or a fix so that the two logos are not flashed for a few seconds when loading - please let us know - thanks McNott
I’ve updated the code periodically to keep up with Elementor’s updates. It could be a CLS issue (cumulative layout shift). Sometimes a performance plugin and lay loading can cause this and sometimes a pre-load can fix. It’s hard to say. Try deactivating your performance plugin, clear the cache and see if it still happens.
Thank you! I really appreciate you making this in response to my question on one of your other videos. It took me a while to get to it as I was focusing on other aspects of the site this past week, but I was able to do it this evening and it worked perfectly.
@@LytboxStudio Hi, again! Although I said that the header was working really well, I realise now that I'm testing everything for responsiveness that there's a place between the 768px and 1025px breakpoints where the header overlaps the page title. I've tried creating a third header as a responsive header but even that's overlapping the page title. Increasing the 768px breakpoint doesn't help much and, as far as everything else is concerned, I'd rather the breakpoint remain as is. As the site is essentially ready to go other than this issue, I've just quietly made the site live so I can ask a few folk to try it out on different screen sizes, rather than my relying on shrinking my browser. If you've got a moment to take a look at the issue and perhaps figure out what I'm missing I'd be hugely grateful. I realise I'm asking you to take time doing this but it could, of course, give you another video topic. 😊 If so, the URL is jamesperloff.net
Thanks for the tutorial! I want to make a question. If i wanted to appear the first menu at the 1px of scroll up and not at the top of the page, what should i do? Thanks a lot!
Thx for your great tutorial! Only one suggestion for improvement: maybe its better to put the z-index of the sticky menu to 100 and for scrollin/fadein menu to 101. figured out some issues, while scrolling down with an open mobile menu (dropdown with toggle).
Hi Jeffrey, I rarely ever comment something on RUclips, but I believe u are a real star and truly amazing putting so much great staff online. I didn't manage to make the 2 menus:((, or better the dark menu doesn't disappear and reappear (probably my mistake somehow with the code?) but your videos are amazing. Thx so much. V form Germany
Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you? I am planning to make a revised tutorial with the updated Elementor version and this time include mobile set up.
That is a great explanation of enhanced menu sticky. Would you know how to create a menu that when you scroll down the menu scrolls off the screen as in un sticky. When you scroll up the menu appears? It is similar to the Elementor/theme bar they work in a same way. It then makes the screen max size to view and if scrolling up the menu shows so you can move to another page.
Sorry for the late reply, I was taking time off and back now. Were you able to find a solution yet? I do plan to make an updated tutorial and include this option.
oh I noticed that the hamburger in the responsive version now is only cliccable when the use has scrolled down (is it on header-2?) That is not good, because I need the hamburger to work all the time in both versions
I really wanted to give big shout out to you, it's an amzing video explaining everything so simply. Great. Pleas share more of such stuffs. Looking for how to create Mega Header, if you have already that's great.
Depending on the theme, headers can be transparent by default or needs to be set to be transparent. I created this video to help out with this - ruclips.net/video/44axq8Absis/видео.html Please let me know if that works for you
do you also have a tutorial where you show how to combine this changing header with a hide effect (e.g. as in your tutorial; header 1 without bg, header 2 with white bg and shadow BUT this header is combined with a hide on scroll down/only show on scroll up)
I always felt uncomfortable with learning code ... I'm a graphic designer but looking at his work is so interesting and fun that I definitely want to keep learning ... thanks for your tutorial ...
Hello. Thanks for your tutorial. I’m using the header right now. But the sticky header menu drop down item is behind the page when I hover on menu. Please help
Hi. Hope you are well. I was following the steps but at the start when I select update, header doesn't sit on the page, but the page is lower done, as in, it doesn't sit behind the header. Not sure what to do here. Do I need to add negative margins?
Hey Mohammed, I think what you are trying to do it have the menu over the banner like a transparent menu, is that correct? If so, you will need to use negative margins. I made a video on this as well to help out here - ruclips.net/video/44axq8Absis/видео.html Let me know of that works. Cheers!
I have done it on one of my website and it look great, thanks for your video :) Is there a way to make the menu dropdown close when we clic "header-1" or "header-2" ? If I click to open the light version menu in "header-1" and scroll donw a bit, the dark version menu in "header-2" appears, and now if I scroll back up I see 2 menu open.
Hey! great tutorial! It helped out a lot, but I was trying to figure out a way that the effect could be triggered by mouse hover instead of with the scroll. Any ideas?
Brilliant video! Just one question: why when you save the 2 header and preview on the page you suddenly have it OVER the first section and not at the top of the section? Because my header automatically add space at the top of the section. Instead you have your headers overlap the first section. Thank you!
Great question. It's because I found a compatibility issue with Safari and the only workaround I could find was to put the header that's moving on the top under the default header.
@@LytboxStudio thank you! So..to show them overlapping the hero section you add a negative margin on them? Because if isn't you have them as separate section :)
@@LytboxStudio I don't think that's what he is referring to because I was about to ask the exact same question. When you create the 2 headers for the first time and set the condition to show on entire site, you then preview the page and all of a sudden you headers are overlaying your content as apposed to being on top and pushing your content down. How did you get it to automatically overlay your content instead of pushing your content down?
Hello Jeffrey Thank you for that video. It helped a lot. I have one problem. I have 2 screens. One is 24 inches and the other screen is 17 inches. When I switch the website from one to another screen the header isn't 100% width anymore. I hope u get what I mean. Is this a css problem? Do u think U could fix it by adding some CSS?
I’ll need to test this. Can share this bug and a link to the site on my blog post? We’re doing more support there now and updating all tutorial code snippets.
Love this tutorial. However, I have always the same problem: When I resize my browser, it seems to break - for example, the second header appears again when I first resize it to a small windows and then to full screen again. Any ideas how to fix this? Keep up the great work!
If there is a heading in my header, how do I change the color of the heading when the menu is scrolled. example: initially the headings in my header are black. When I scroll down, my heading turns white
In this tutorial, the strategy is creating two menus and stying up both menus. If you want to use another strategy. I have a couple other videos where can target color changes with CSS. But I would advise not to put a header in your menu. Headers are important for SEO and having in a menu should be avoided. If you have more questions about this please let me know.
Good question. I never put my CSS in Elementor widgets or sections because I want to keep my css organized, clean, and centralized. When adding CSS in Elementor widgets, the CSS is scattered and creates problems down the line. Keeping css organized and centralized makes it easy and fast to locate CSS for myself and other team members.
Hey man! Thanks for a very well made tutorial. Just facing a problem now. I have added a nav cart and a search icon to the header. Both of those elements launch a popup window or lightbox when clicked. The elements work just fine in the header-1 (non sticky) but it seems to be an overflow issue when using the ones from the header-2 (sticky). The popups don't overflow the limits of the section's height. Oddly the dropdown menu from the nav menu of the header does overflow. Any idea? Thank you in advance!
Hi Jeffrey, I know this is an old video but I am using your tutorial to create the changing header but there is some of the bottom of the sticky header showing before scroll. How do I hide sticky header completely?
Awesome tutorial! Only thing is, i have a transparent 2 section header and a sticky 2 section header. On desktop and tablet we are good. But on mobile the upper section of the sticky header cuts off on scroll down. When i scroll up i can see the entire thing just fine. Any help?
Hey, thanks again for the great tutorial. I have noticed a new problem, maybe you or someone else has a solution for this? When I place the shopping cart widget for a woocommerce store in the scroll header, unfortunately the side cart only opens in the header and not across the whole page. The side cart is virtually inside the header and does not overlay it. The last Elementor Pro version where this still works is 3.5.2. I hope you or someone else has a solution for me, because I really like the scroll header!
Great Tutorial, even greater presentation. Fun and easy to follow. Implementing wasn't as smooth as in the tutorial but I got it to work. However, in my case the menu of the transparent header is not clickable. I guess you cannot have tow menus lying on top of each other and having the same links?
Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you? This sounds like the z-index needs to be adjusted
Teacher, sorry for my bad English, I'm not good at your language ... I have a question, how can I make a logo move from left to right and place when scrolling? Do you know of a plugin to improve Elementor Pro's scrolling effects? I feel that they are limited, I like the DIVI ones much more ... but I would like to have an improved plugin but I can't find it .. just like a navigation section snap to auto-adjust each anchor when scrolling ... I only know the premium one addons but it does not have speed settings ... thanks for your courses I have learned a lot.
Interesting challenge. I know Elementor Motion effects can move elements right and left when scrolling. I would try there first. And maybe check out The Plus, they have lots of good effects.
@@LytboxStudio The plus are very good ... I just installed the free version, and I did not have the option to adjust sections, but there was an update and they already put them for free ... they are great. Without a doubt knowing how to program and a bit of code makes things great ... your courses are very good, I wish I had had a teacher like you, surely today I would be like a hundred times better at what I do ... greetings and Thank you very much for answering my question.
Hey, nice guide, but I have a problem with adding Menu cart to the second header. Then it doesn't expand to the whole screen but cuts it off in the Header. Do you have a solution?
hi! Amazing work! how about on horizontal scroll header? then it changing color that depend on the background? i think its pretty cool to have that one.
For me, it works only in the header theme builder, but once I apply the header to a page, it doesn't work properly. As soon as the effects offset is greater than the translatey value in the CSS, the solid banner does not slide down. If the effects offset is less than or equal to translatey, the solid banner slides down immediately on page load. Great video regardless
I can see the bottom one or two pixels of the sticky header before scrolling. Neither padding or margins seem to move it up. Do you have any suggestions?
HI! I'm using the Astra theme with Elementor pro and I implemented everything you said. the header looks great but now there is an extra line at the bottom of every page of my website saying: "// Elementor Code// header color change on scroll" Do you know how to get rid of this? Did I do something wrong?
Incredible tutorial, thank you! I just have one issue, maybe someone knows - When I create the header it won't go over the page body, but it "pushes" the content down, leaving a blank space where the header is. Only when I define it as sticky and give it negative margin, it works, but than this solution doesn't... What am I doing wrong?...
This is how mine works as well. If I add the header, it pushes the content down, the header doesn’t just float over the content. I’m using the “Hello” theme, don’t think that comes into play. I’ve tried this on two separate installations, the header sits above the content.
Give your header section a negative bottom margin that is the same height as your header. This will put your header overtop of your content. Lytbox has another video explaining this here: ruclips.net/video/44axq8Absis/видео.html
I cannot get my header to be transparent. Yours appear to be transparent by default. Maybe it has something to do with my Ocean WP theme? Both of my headers are white. Tried to apply color and make it transparent. Did not help. I really need this on my page and I could use some help.
@@LytboxStudio Thanks for the reply. I saw the new video and I am aware of that method of getting a transparent header. However, I would really need a one with the possibility of changing from a transparent header to a header with a white background like in this video. I understand all the steps and methods overall but I cannot get the headers to be transparent. I guess I should combine the two methods? How did you get your headers to be transparent? You actually had to give it white background to NOT be transparent.
@@druckenpumpe I did combine both methods. For all transparent menus, I use the method in the new video. I realized I should have shown that in this video which is why I made the new video. So, to help make it more clear, I would start with the first video making the transparent header then continue with this video to make it change on scroll. If you still can't get it to work, let me know and we'll figure it out
![[FREE] How to Create Transparent Sticky Header in WordPress with Elementor](http://i.ytimg.com/vi/ccYnXY2_Kvc/mqdefault.jpg)
Man God bless you, you just saved me !!! i have been scrolling on youtube since two days now looking for this change of header effect, have watch countless videos and each time i don't get what i want i feel like crying
THANK YOU!!! This fixed exactly what I've been looking for the past couple of hours :D
So glad to hear. Thanks! 🙏
Deleted my website header yesterday by accident and had to redo it as fast as possible. THIS IS THE FASTEST video tutorial I have found. Give the man a medal!!
Haha so glad to hear!!!
OMG I was searching for this solution and couldn't find it. And then I found this video that was EXACTLY what I needed! Thank you so much!
I'm so glad to hear! Thanks!
Excellent! Really creative, lean, beautiful and perfect idea.
You have helped me solve something that has been bothering me for a long time.
Thank you so much!
Hi nice video, question...How did you make the menu to be automatically in front of the banner, without setting the top margin to negative?
Thank you so much! Watched the video and read through the blog simultaneously. I've been struggling to get this feature added and it now works great!
So glad to hear it worked for you! Thanks!
@@LytboxStudio Quick question.. I've added this feature and it works great however when I switch to mobile few it's not looking/work as great. any insight?
Thank you so much! I saw many tutorials with the same info. But because you explained what was everything I found out why it didn't work for me!
Hello! First of all thanks for the tutorial Jeffrey. You explain it very well :)
I have done it and I have several issues in mobile. It works perfectly on desktop but on mobile there are different errors in Chrome and Safari. In the first the 2 headers overlap and in Safari when loading the page the header does not exist, only when you scroll down the second one appears and when you scroll up the first one appears.
Thanks man! :)
I like the cam, so clearly. And the light of the room is awesome. So natural since I saw your dog so relax. I like this better than dark room 😁 anyway thanks for the header tips n tutorial
Thanks Clement! That's Yoda in the background. Always chillin' 😎
@@LytboxStudio Yoda is like a boss hahaha awesome 😁
which stile do you pastes in your header then it became smaller??
this is so helpful bro. I was in trouble to do this. after all it's done. thank you so much for your great video tutorial bro. appreciate more videos from you bro.
Hey Ashif thanks! I really appreciate that 🙏
This is awesome! You are really doing a service by providing us these tutorials for free.
Many Thanks 🙏💜
Thank you! GREAT tutorial! I only have an issue when i add a woocommerce cart menu. The side cart not working properly with the header-2 (white background). Do you have a solution for this? Thanks!
It's probably going to take a bit more CSS for the side cart. I'll try and update this but could take some time. I try and update all tuts with CSS once a month to keep up to date. I'll check the cart in the menu on the next update
@@LytboxStudio any update please?
Just tried it with the lastest elementor version. It works pretty great! only with the Fade out Css, but it all worked out changing the transition value from: opacity to all, and cutting the !important in the last statement. Thank you very much!
Wow, that is awesome!
Thanks for this good tutorial. Very well explained and easy to do!
Greetins from Italy!
Hi, great job though a quick question - I have followed all your points in the video though when my site is loading from the getgo for a short period (a second or two) both logos overlap at the top - as the screen (even though they are aligned with Elementor as per your instructions using negative margin). The question is that as this very informative video was was made three years ago are there any updates i.e. the Safari bug you described etc or a fix so that the two logos are not flashed for a few seconds when loading - please let us know - thanks McNott
I’ve updated the code periodically to keep up with Elementor’s updates. It could be a CLS issue (cumulative layout shift). Sometimes a performance plugin and lay loading can cause this and sometimes a pre-load can fix. It’s hard to say. Try deactivating your performance plugin, clear the cache and see if it still happens.
Thank you! I really appreciate you making this in response to my question on one of your other videos. It took me a while to get to it as I was focusing on other aspects of the site this past week, but I was able to do it this evening and it worked perfectly.
So glad to hear!
@@LytboxStudio Hi, again! Although I said that the header was working really well, I realise now that I'm testing everything for responsiveness that there's a place between the 768px and 1025px breakpoints where the header overlaps the page title. I've tried creating a third header as a responsive header but even that's overlapping the page title. Increasing the 768px breakpoint doesn't help much and, as far as everything else is concerned, I'd rather the breakpoint remain as is. As the site is essentially ready to go other than this issue, I've just quietly made the site live so I can ask a few folk to try it out on different screen sizes, rather than my relying on shrinking my browser. If you've got a moment to take a look at the issue and perhaps figure out what I'm missing I'd be hugely grateful. I realise I'm asking you to take time doing this but it could, of course, give you another video topic. 😊 If so, the URL is jamesperloff.net
Thank you so much Jeffrey! (and liked)
You do a great job explaining this and I now have a sticky menu.
Thanks for the tutorial!
I want to make a question.
If i wanted to appear the first menu at the 1px of scroll up and not at the top of the page, what should i do?
Thanks a lot!
Perfect thank you ! It works perfect, I choose 2nde option personaly (fade in)
Perfect! Many Thanks 🙏💜
I worship at the alter of your skill. You helped me solve a problem i had been trying to solve for days! Thank you
Haha your welcome 😆
Thx for your great tutorial!
Only one suggestion for improvement: maybe its better to put the z-index of the sticky menu to 100 and for scrollin/fadein menu to 101. figured out some issues, while scrolling down with an open mobile menu (dropdown with toggle).
That's a good suggestion. Thanks!
You are the best!, please keep making videos like this, it helped me very much
Much thanks! 🙏 ❤️
great tutorial, many thanks. works just as intended. Cheers🙌
Hi Jeffrey, I rarely ever comment something on RUclips, but I believe u are a real star and truly amazing putting so much great staff online. I didn't manage to make the 2 menus:((, or better the dark menu doesn't disappear and reappear (probably my mistake somehow with the code?) but your videos are amazing. Thx so much. V form Germany
One of the best, clear and easy-to-follow tuts I've ever had to pleasure of watching and applying to my site... thank you so much, great job!
So glad to hear it helped. Thanks! 🙏
This is just what I was looking for. You just earnes yourself a subscriber.
Thanks Marin and I appreciate the sub!
That's really helpful. I'm using containers, but it works just the same.
Super thanks, I always enjoy using your tutorials. Keep up the good work!
What about the mobile and responsive? Do what do we need to do? With 2 menues? Headers? Thanks🙏
Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you?
I am planning to make a revised tutorial with the updated Elementor version and this time include mobile set up.
Thank you!
But when I create the 2 headers they are above the area on the main page and not on it as you show in the video
Thank you. Great tutorial. Might want to mention that you should remove the negative top margin for mobile resolutions.
That is a great explanation of enhanced menu sticky. Would you know how to create a menu that when you scroll down the menu scrolls off the screen as in un sticky. When you scroll up the menu appears? It is similar to the Elementor/theme bar they work in a same way. It then makes the screen max size to view and if scrolling up the menu shows so you can move to another page.
Sorry for the late reply, I was taking time off and back now. Were you able to find a solution yet? I do plan to make an updated tutorial and include this option.
oh I noticed that the hamburger in the responsive version now is only cliccable when the use has scrolled down (is it on header-2?)
That is not good, because I need the hamburger to work all the time in both versions
Hey man thanks for this awesome guide! just seems to display both headers when you resize the browser window? You had any issues like that? Cheers!
Hey Shane sorry for the late reply. Did you find a solution yet? If not let me know and I'll help. Cheers
I really wanted to give big shout out to you, it's an amzing video explaining everything so simply. Great. Pleas share more of such stuffs. Looking for how to create Mega Header, if you have already that's great.
Hi there, great video! For some reason the first menu is not transparent do you know whats the problem with that?
I ve got the same issue
Depending on the theme, headers can be transparent by default or needs to be set to be transparent. I created this video to help out with this - ruclips.net/video/44axq8Absis/видео.html
Please let me know if that works for you
I made another video to help out with this - ruclips.net/video/44axq8Absis/видео.html
do you also have a tutorial where you show how to combine this changing header with a hide effect (e.g. as in your tutorial; header 1 without bg, header 2 with white bg and shadow BUT this header is combined with a hide on scroll down/only show on scroll up)
I always felt uncomfortable with learning code ... I'm a graphic designer but looking at his work is so interesting and fun that I definitely want to keep learning ... thanks for your tutorial ...
Thanks and so glad to hear! CSS is a great tool to learn fro us designers. Keep it going!
Simple and easy, that's what you made me think. Thanks a lot and keep creating new videos
Big Thanks! 🙏 And I for sure will 💪
Hi great tutorial, but the fader in option doesnt work to me.. just the header-1 stay fixed as default. Any suggestion?
Hello. Thanks for your tutorial. I’m using the header right now. But the sticky header menu drop down item is behind the page when I hover on menu. Please help
Sorry for a late reply - if you haven't fixed yet try increasing the z-index in the section your header is in.
Thank you kindly for this Jeffrey. Very good video and you explain it very clearly and succinctly. Much appreciated. You have a new subscriber.
This is prefect - thank you. Is there any way to adapt it so that header-2 reveals on upscroll instead?
That is a future video coming up soon! It's on my list
@@LytboxStudio you really did great job bro
The way you explained makes me right away subscribe your channel!
Wow thanks! 🙏
Hi. Hope you are well. I was following the steps but at the start when I select update, header doesn't sit on the page, but the page is lower done, as in, it doesn't sit behind the header. Not sure what to do here. Do I need to add negative margins?
Hey Mohammed, I think what you are trying to do it have the menu over the banner like a transparent menu, is that correct? If so, you will need to use negative margins.
I made a video on this as well to help out here - ruclips.net/video/44axq8Absis/видео.html
Let me know of that works. Cheers!
@@LytboxStudio Thank you so much! That is exactly what I did! You're a star!
I have done it on one of my website and it look great, thanks for your video :)
Is there a way to make the menu dropdown close when we clic "header-1" or "header-2" ?
If I click to open the light version menu in "header-1" and scroll donw a bit, the dark version menu in "header-2" appears, and now if I scroll back up I see 2 menu open.
Hey! great tutorial! It helped out a lot, but I was trying to figure out a way that the effect could be triggered by mouse hover instead of with the scroll. Any ideas?
Brilliant video! Just one question: why when you save the 2 header and preview on the page you suddenly have it OVER the first section and not at the top of the section? Because my header automatically add space at the top of the section. Instead you have your headers overlap the first section. Thank you!
Great question. It's because I found a compatibility issue with Safari and the only workaround I could find was to put the header that's moving on the top under the default header.
@@LytboxStudio thank you! So..to show them overlapping the hero section you add a negative margin on them? Because if isn't you have them as separate section :)
@@LytboxStudio I don't think that's what he is referring to because I was about to ask the exact same question. When you create the 2 headers for the first time and set the condition to show on entire site, you then preview the page and all of a sudden you headers are overlaying your content as apposed to being on top and pushing your content down.
How did you get it to automatically overlay your content instead of pushing your content down?
This was dope. Super straight forward, super easy to follow. Implementing this on my new site now. Subscribed.
Many thanks! 🙏
Great tutorial. I was looking for exactly this function, thank you very much
Great to hear!
Hello Jeffrey
Thank you for that video. It helped a lot. I have one problem. I have 2 screens. One is 24 inches and the other screen is 17 inches. When I switch the website from one to another screen the header isn't 100% width anymore. I hope u get what I mean. Is this a css problem? Do u think U could fix it by adding some CSS?
I’ll need to test this. Can share this bug and a link to the site on my blog post? We’re doing more support there now and updating all tutorial code snippets.
Can u send me a link of your blog post or where can I find it?
@@LytboxStudio Can u send me a link of your blog post or where can I find it?
Thanks so much about this header effect, not easy to find a tutoriel for that ! :D
Happy to help!
Great Tutorial.... very simple to understand. Thanks a lot!
Thanks!🙏
Love this tutorial. However, I have always the same problem: When I resize my browser, it seems to break - for example, the second header appears again when I first resize it to a small windows and then to full screen again. Any ideas how to fix this? Keep up the great work!
I want to configure in mobile that only the colored menu will be displayed without the code in a normal way and without the code, how do you do this?
I loved the tutorial and I love that dog 🤩
Haha! That's my boy Yoda!
But how to add shadow to header after we scroll page ?
Thank you
If there is a heading in my header, how do I change the color of the heading when the menu is scrolled. example: initially the headings in my header are black. When I scroll down, my heading turns white
In this tutorial, the strategy is creating two menus and stying up both menus. If you want to use another strategy. I have a couple other videos where can target color changes with CSS. But I would advise not to put a header in your menu. Headers are important for SEO and having in a menu should be avoided. If you have more questions about this please let me know.
Why do you use the wordpress customiser for CSS? Could we not just use the CSS inside the elementor plugin to input the CSS?? @Lytbox
Good question. I never put my CSS in Elementor widgets or sections because I want to keep my css organized, clean, and centralized. When adding CSS in Elementor widgets, the CSS is scattered and creates problems down the line. Keeping css organized and centralized makes it easy and fast to locate CSS for myself and other team members.
Hey man! Thanks for a very well made tutorial. Just facing a problem now. I have added a nav cart and a search icon to the header. Both of those elements launch a popup window or lightbox when clicked. The elements work just fine in the header-1 (non sticky) but it seems to be an overflow issue when using the ones from the header-2 (sticky). The popups don't overflow the limits of the section's height. Oddly the dropdown menu from the nav menu of the header does overflow. Any idea? Thank you in advance!
The problem occurs when I give the section the class "header-2" (css already pasted)
Same problem.
Hi Jeffrey, I know this is an old video but I am using your tutorial to create the changing header but there is some of the bottom of the sticky header showing before scroll. How do I hide sticky header completely?
You need to adjust this line of CSS - transform: translatey(-80px); adjust the 80px until your header os off screen
Nice and simple! Thank you!
Perhaps on your next video you can include a shrinking logo?
Cheers!
I already did that one 😉 check my other videos and you’ll see the Shrinking Logo
Great tutorial. What about if you want to swap headers between sections? Could you make a tutorial for that?
Sounds interesting. Can you give an example of a header in between sections? What does that layout look like?
Great tutorial! Greetings from Barcelona, Spain.
Hey, thanks Spain! Much ❤️ from Thailand!
Great tutorial sir. Go ahead. Love from Bangladesh
Thank Farid! ❤️ from Thailand
what if i want remove the logo in TRANSPARENT MENU AND ONLY STICKY HEADER HAS LOGO how to do that
Awesome tutorial! Only thing is, i have a transparent 2 section header and a sticky 2 section header. On desktop and tablet we are good. But on mobile the upper section of the sticky header cuts off on scroll down. When i scroll up i can see the entire thing just fine. Any help?
It probably needs some modification in the css. Any suggestions would be great!
Thank you, that's all i need and i looked for it about couple of hours :D .
So glad to hear!
hello, how can i use bounce in effect from top?
To be honest, I would not use bounce in effects. They feel dated and a smoother clean transition has a much nicer feel
Hey, thanks again for the great tutorial. I have noticed a new problem, maybe you or someone else has a solution for this?
When I place the shopping cart widget for a woocommerce store in the scroll header, unfortunately the side cart only opens in the header and not across the whole page. The side cart is virtually inside the header and does not overlay it.
The last Elementor Pro version where this still works is 3.5.2.
I hope you or someone else has a solution for me, because I really like the scroll header!
Hey bud. Did you ever find a fix for this ?
Excelente. Primer tutorial de menú de este estilo para Elementor que encuentro que funciona realmente. Gracias.
Great Tutorial, even greater presentation. Fun and easy to follow. Implementing wasn't as smooth as in the tutorial but I got it to work. However, in my case the menu of the transparent header is not clickable. I guess you cannot have tow menus lying on top of each other and having the same links?
Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you? This sounds like the z-index needs to be adjusted
Teacher, sorry for my bad English, I'm not good at your language ... I have a question, how can I make a logo move from left to right and place when scrolling? Do you know of a plugin to improve Elementor Pro's scrolling effects? I feel that they are limited, I like the DIVI ones much more ... but I would like to have an improved plugin but I can't find it .. just like a navigation section snap to auto-adjust each anchor when scrolling ... I only know the premium one addons but it does not have speed settings ... thanks for your courses I have learned a lot.
Interesting challenge. I know Elementor Motion effects can move elements right and left when scrolling. I would try there first. And maybe check out The Plus, they have lots of good effects.
@@LytboxStudio The plus are very good ... I just installed the free version, and I did not have the option to adjust sections, but there was an update and they already put them for free ... they are great. Without a doubt knowing how to program and a bit of code makes things great ... your courses are very good, I wish I had had a teacher like you, surely today I would be like a hundred times better at what I do ... greetings and Thank you very much for answering my question.
@@theredmaster_superbee keep it up mate and you’ll just keep getting better! 💪 It’s a fun journey
Very very good tutorial. Cheers from Cuba
Thanks and awesome seeing someone for Cuba here! I love how we can all connect like this
Thanks so much I searched this many times on google, but here this.
I’m so glad to hear! Thanks 🙏
Hey, nice guide, but I have a problem with adding Menu cart to the second header. Then it doesn't expand to the whole screen but cuts it off in the Header. Do you have a solution?
Might be something in the CSS that needs adjusting
Excellent tutorial. Thank you for sharing :)
Thanks! 🙏
hi! Amazing work! how about on horizontal scroll header? then it changing color that depend on the background? i think its pretty cool to have that one.
That does sound like a fun project!
This is a GREAT tutorial. So straight ahead and super efficient. Thank you, Sir!
Thanks!🙏
Excellent tutorial, thanks! Clear and to the point with just the right amount of information.
I appreciate that Shawn, thanks! 🙏
Great vid, really helped. Straight to the point too. Thanks v much
Thank you Daniel 🙏
This was sooooo helpful! Thank you so much!
I am so glad to hear! Thanks!
For me, it works only in the header theme builder, but once I apply the header to a page, it doesn't work properly. As soon as the effects offset is greater than the translatey value in the CSS, the solid banner does not slide down. If the effects offset is less than or equal to translatey, the solid banner slides down immediately on page load. Great video regardless
Sounds like there's some kind of code conflict happening. Feel free to share a link and I can have a quick look. Cheers!
For some reason the effect offset is not working for me. Otherwise great tutorial. Would love to know the fix though?
Fantastic tutorial, I finally find out a way to realize my dreams ahaha!!
Haha so good to hear!
Great video, thanks for posting
Awesome tutorial! Thank you so much!
All sorted out !! Thx a lot 👍
So glad to hear!
I can see the bottom one or two pixels of the sticky header before scrolling. Neither padding or margins seem to move it up. Do you have any suggestions?
Hey Tim, you will need to adjust this in the CSS - transform: translatey(-80px); add a few more pixels until it is out of the screen
@@LytboxStudio Great! Thanks!
HI! I'm using the Astra theme with Elementor pro and I implemented everything you said. the header looks great but now there is an extra line at the bottom of every page of my website saying:
"// Elementor Code// header color change on scroll"
Do you know how to get rid of this? Did I do something wrong?
That’s a strange one. Can you share a link? I can take a quick look
Incredible tutorial, thank you! I just have one issue, maybe someone knows - When I create the header it won't go over the page body, but it "pushes" the content down, leaving a blank space where the header is. Only when I define it as sticky and give it negative margin, it works, but than this solution doesn't... What am I doing wrong?...
Hard to say with out seeing it. Do you have a link I can take a quick look at?
This is how mine works as well. If I add the header, it pushes the content down, the header doesn’t just float over the content. I’m using the “Hello” theme, don’t think that comes into play. I’ve tried this on two separate installations, the header sits above the content.
@@LytboxStudio I realy appriciate yout suggestion to help! Unfortunatly I can't share it at the moment, it's something I'm doing for a client...
Give your header section a negative bottom margin that is the same height as your header. This will put your header overtop of your content. Lytbox has another video explaining this here: ruclips.net/video/44axq8Absis/видео.html
Amazing. It is all that I have been looking for. Thanks!
Many Thanks 🙏💜
Great video… Liked & subscribed
Thanks 😊
awesome background, the doggy
That's my boy Yoda 💜
there is responsive issue when we reduce the size of screen slowly its gonna give us white spaces ...
Thank you very much,my teacher.👍👍
I cannot get my header to be transparent. Yours appear to be transparent by default. Maybe it has something to do with my Ocean WP theme?
Both of my headers are white. Tried to apply color and make it transparent. Did not help.
I really need this on my page and I could use some help.
Hey sorry to get back to you so late. I just published a new video on making a transparent header.
ruclips.net/video/44axq8Absis/видео.html
@@LytboxStudio Thanks for the reply. I saw the new video and I am aware of that method of getting a transparent header. However, I would really need a one with the possibility of changing from a transparent header to a header with a white background like in this video. I understand all the steps and methods overall but I cannot get the headers to be transparent. I guess I should combine the two methods?
How did you get your headers to be transparent? You actually had to give it white background to NOT be transparent.
@@druckenpumpe I did combine both methods. For all transparent menus, I use the method in the new video. I realized I should have shown that in this video which is why I made the new video. So, to help make it more clear, I would start with the first video making the transparent header then continue with this video to make it change on scroll. If you still can't get it to work, let me know and we'll figure it out
Thanks of give us this class
Many Thanks 🙏💜