You have one of the most important Elementor channel on youtube, you deserve 1.000.000 subscriber, your videos and tutorials are stunnig. Thank you very much for your work.
I read somewhere that the pop up type menu isn't necessarily good for SEO since the menu doesn't get includedin the DOM until user clicks the menu button. Meaning the nav menu is invisible to crawlers
Your absolutely right. In time, when your nav menu improves your seo website ranking with it's basic keywords, then you decided to make a pop-up nav menu. The code will be dom. Even when you inspect the site its not there in code. Only when you open it. Even after that, you close the popup its still gone from code. But like the author said.. Put a nav menu on footer. That will help.
I made this menu following your steps, but when I click on any section of the page, for example Contact, the page moves but the menu does not close automatically, yes or I have to close the menu before I can see the page. Is there any solution to this? Thanks
Hi. Excellent tutorial and much appreciated! I have it working well and it looks great! Question: I see you have iPhone 6/7/8 plus on top of your editing screen there. Is that a plugin or something I could get?? :)
Great tutorial but I got a problem at first it was working perfect but lately there's a problem the menu goes to the left and display all like a list and theres an hamburger icon and a cross mark at the top
After seeing this video I did! Looks so awesome! Thanks for the step by step tutorial, please create more of these, especially for nice (motion) effects to spice up our elementor websites.
This is unbelievable, I saw a website a few days ago with a similar menu, came on here to see if there was a tutorial, and BOOOOOM. Thanks so much, I am having an issue though when I add the nav menu and space the menu I get a scrollbar on the right-hand side, can you help? I think I've followed every step correctly. Subscribed and thanks again
Glad I could help! Not really sure what's going on without actually working on it, but the first thing I'd do is trying to troubleshoot with the Chrome inspector. It could also be the font-size (if it's too big). I hope that helps ;)
@@KayCinho Heeeey thanks for the reply! The only way I found to solve it was by changing the layout to verticle instead of dropdown. It's a great effect and looks quality, thanks again, just what I was looking for, I'll be going through your content over the weekend.
Great tutorial! I have one question, I recreate it in the newest version of Elementor Pro as of October 2023, and I can't get the Popup to close automatically after clickin one option in the menu, is there a way to have it close automatically after a click anywhere in the screen? Thanks.
hey Kaycinho, thats a awesome video!!! I like your videos so much. But I have a question : I try to make the header transparent but doesn't work. idk why... I hope u can help me.
Great video though! Just an issue with your tutorial awhile building this header on a single page website. When you go through your link menu with anchor links it'll bring you down on the page but it'll keep your header on! Is there a way to close the popup once you click on an anchor link by any chance? I tried many ways with dynamic links but can't integrate a regular link + add an action to it.. Looking forward to be hearing back from you though! Take care :)😄
@@KayCinho I saw it. In terms of the outcome either way is good, right? I have run across elementor pro newest version messing up popup menus but with this clean install and your method, it all looks awesome!
Hello Kaycinho... love this tutorial! One question: When doing a normal dropdown nav menu for mobile we dont have % or VH units like in a pop-up and i always struggle with the same problem. Don't know how to do the dropdown menu to fix to the screen height. Any solution? THANK U! :-)
Great tutorial. But how about dropdown nav menu in popup? My menu goes on the left out of the screen. I know you can do with CSS, but is easier way? Thank you. :D
Superb!! THX!! 1 question: When the menu opens and the animation ends, the whole content "jumps" 20pix to the right. I can't find the reason...do you know this effect?
I rechecked everything and in the end i found the reason. "Overflow: hidden" needed to be resaved again - after that it worked fine...some of these strange effects that don't make sense, because i didn't really change anything. Great Tutorial!!! Thanks!
Love the content. Super helpful. So how does one get the menu to close once one clicks the menu button on a one-page site? Or is this not useful for that? Thanks again.
Hi Kaycinho, I wanted to use your menu. There is a problem with the closing "x" button. It is not in the right upper corner of the template, but almost in the middle of the page. Could you tell me how to fix that?
@@janedang7241 Yes that's exactly what I thought, it's just you used geep speak to say that:) thanks, Jane, so may use these popups but I wonder if they realize google won't be able to see them!!!
Add script to popup (html block), that pop-up will automaticly close after push menu button jQuery(function($){ $(document).on('click','.elementor-location-popup a', function(event){ elementorProFrontend.modules.popup.closePopup( {}, event); }); });
And here is the FLEXBOX EDITION of this tutorial: th-cam.com/video/a5-yEH92_fM/w-d-xo.html
You have one of the most important Elementor channel on youtube, you deserve 1.000.000 subscriber, your videos and tutorials are stunnig. Thank you very much for your work.
Totally agree!
Thank you so much for the quality of your tut !!
I read somewhere that the pop up type menu isn't necessarily good for SEO since the menu doesn't get includedin the DOM until user clicks the menu button. Meaning the nav menu is invisible to crawlers
You could always put a normal menu somewhere in the footer, I guess.
i think it depends, in normal case you have a sitemap for this reason, correct me if im wrong
Your absolutely right. In time, when your nav menu improves your seo website ranking with it's basic keywords, then you decided to make a pop-up nav menu. The code will be dom. Even when you inspect the site its not there in code. Only when you open it. Even after that, you close the popup its still gone from code.
But like the author said..
Put a nav menu on footer. That will help.
This was a FANTASTIC and easy to follow tutorial!! Plus you get a GREAT menu!! thank you!
My pleasure!
Been looking for ways to create something like this, thank you very much! ❤
You're welcome 😊
This is Beautiful! Exactly what I was looking for! Thank You!!
I made this menu following your steps, but when I click on any section of the page, for example Contact, the page moves but the menu does not close automatically, yes or I have to close the menu before I can see the page. Is there any solution to this?
Thanks
Thank you so much!! Was searching everywhere for how to link the icon to the pop and this was perfect!
An awesome tutorial. Very well explained and easy to follow. Amazing!
Excellent tutorial, it was worth watching it. You just got yourself a new subscriber. Thank you.
Hi. Excellent tutorial and much appreciated! I have it working well and it looks great! Question: I see you have iPhone 6/7/8 plus on top of your editing screen there. Is that a plugin or something I could get?? :)
Great clear and concise explanation! Thank you
You saved my life, thank you for this excellent and dynamic tutorial, new subscriber on board!!!
Welcome on board! :)
Thank you so much, exactly what I was looking for. Super easy, super cool. Thank you!
Great tutorial but I got a problem at first it was working perfect but lately there's a problem the menu goes to the left and display all like a list and theres an hamburger icon and a cross mark at the top
Absolutely stunning and beautiful 🤩
Please can you make a video on how to make a working price chart with elementor which able to take payments in WordPress website with woocommerce
Hi, I don't currently plan to release Woocommerce tutorials, but I might do so in the future.
Please make tutorial on woocommeec also you're just awesome great work
excelente video, muchas gracias por este tutorial, increíble!!!
Grand grand merci for all I'm new subscriber from France. God Job Tony
Its perfect just that X can be seen while menu is in transition, like when you click on the menu you can see X in the background...
Do you build your full screen menu with Elementor Pro?
After seeing this video I did! Looks so awesome! Thanks for the step by step tutorial, please create more of these, especially for nice (motion) effects to spice up our elementor websites.
Of course!! Thank you so much, that was awesome
@@elisalacicerchia1727 you're welcome Elisa!
This video got me started and it turned out awesome. Thank you so much, I was almost losing a client.
This is unbelievable, I saw a website a few days ago with a similar menu, came on here to see if there was a tutorial, and BOOOOOM. Thanks so much, I am having an issue though when I add the nav menu and space the menu I get a scrollbar on the right-hand side, can you help? I think I've followed every step correctly. Subscribed and thanks again
Glad I could help! Not really sure what's going on without actually working on it, but the first thing I'd do is trying to troubleshoot with the Chrome inspector.
It could also be the font-size (if it's too big). I hope that helps ;)
@@KayCinho Heeeey thanks for the reply! The only way I found to solve it was by changing the layout to verticle instead of dropdown. It's a great effect and looks quality, thanks again, just what I was looking for, I'll be going through your content over the weekend.
Awesome tutorial
Thank you! Cheers!
nice, I just don't like how the hamburger and the x overlap.. is there an easy solution to fix this?
Well done! Extremely helpful.
Great tutorial! I have one question, I recreate it in the newest version of Elementor Pro as of October 2023, and I can't get the Popup to close automatically after clickin one option in the menu, is there a way to have it close automatically after a click anywhere in the screen? Thanks.
hey Kaycinho,
thats a awesome video!!! I like your videos so much. But I have a question : I try to make the header transparent but doesn't work. idk why... I hope u can help me.
Thank you man. I have a small concern my cross button to close the menu is placing in the middle. May I know how to fiix that!
Great video though! Just an issue with your tutorial awhile building this header on a single page website. When you go through your link menu with anchor links it'll bring you down on the page but it'll keep your header on! Is there a way to close the popup once you click on an anchor link by any chance? I tried many ways with dynamic links but can't integrate a regular link + add an action to it.. Looking forward to be hearing back from you though! Take care :)😄
A big THANK YOU!
PLEASE HELP! I get a blue square around the X on mobile only. How to I get rid of that?? 😬👋🏻
Thank you Thank you
Thank you From Morocco
You're welcome Amine!
What is size of backgroud image you have used for a perfect responsive page?
Great content, thank you.
Glad you like it Fabian!
Beautiful work as always!
My pleasure! Thank you for your support ;)
Amazing tutorial! Thank you!
My pleasure! I just released the flexbox version in case you need it.
@@KayCinho I saw it. In terms of the outcome either way is good, right?
I have run across elementor pro newest version messing up popup menus but with this clean install and your method, it all looks awesome!
@@zoltankosa-szantho6951 yes both are good 👍
Hello Kaycinho... love this tutorial! One question: When doing a normal dropdown nav menu for mobile we dont have % or VH units like in a pop-up and i always struggle with the same problem. Don't know how to do the dropdown menu to fix to the screen height. Any solution? THANK U! :-)
Great tutorial. But how about dropdown nav menu in popup? My menu goes on the left out of the screen. I know you can do with CSS, but is easier way? Thank you. :D
Superb!! THX!! 1 question: When the menu opens and the animation ends, the whole content "jumps" 20pix to the right. I can't find the reason...do you know this effect?
I rechecked everything and in the end i found the reason. "Overflow: hidden" needed to be resaved again - after that it worked fine...some of these strange effects that don't make sense, because i didn't really change anything. Great Tutorial!!! Thanks!
My pleasure!
Love the content. Super helpful. So how does one get the menu to close once one clicks the menu button on a one-page site? Or is this not useful for that? Thanks again.
Thanks Mark! I've covered how to do this in this video: th-cam.com/video/plYZ6ufzvrU/w-d-xo.html
@@KayCinho Awesome thank you. I should have known or checked the playlist. Thanks again. Appreciate all you do.
@@markbriankeyer my pleasure :)
I'm guessing this kind of menu will be useless if the end user has a popup blocker?
This is a great video. Thanks. 😊👍
Glad you liked it! Thank you for taking the time to comment :)
If I use a menu with anchor links, the popup doesn't close
Luv! 🎉 Curious if you sell your awesome designs?
Superb !!!!!
Wow, thank you so much for the kind words!
Hi Kaycinho, I wanted to use your menu. There is a problem with the closing "x" button. It is not in the right upper corner of the template, but almost in the middle of the page. Could you tell me how to fix that?
thank you!
My pleasure!
Hi, Can I build a website with a home page with a nav menu where the navbar opens a new full screen temlate
Thanks for the sick video :)
Glad you enjoyed it, Vanna!
One page menu link doesnt work
means it doesn't scroll it div and close the menu
Work, but popup doesn't close after click on menu item
Thanks boss!!!
My pleasure, Mateusz!
Sir how can we make scroll bar for moving submenu item in popuop b coz my subitem is 10 so pls give me code for how can create it? Thanks in advance
How would you use a Lottie file for your hamburger menu?
Absolutely HOTttt!!
=)
What about SEO with pop up menus?
Popups are not SEO-friendly. They're not really exist in the document
@@janedang7241 I don't understand? "They're not really exist in the document"
@@adied7725 Popups are not semantically rendered in the DOM tree. They're basically not indexable by search engines
@@janedang7241 Yes that's exactly what I thought, it's just you used geep speak to say that:) thanks, Jane, so may use these popups but I wonder if they realize google won't be able to see them!!!
Horrible for SEO
Foda-se o SEO
full screen page rather than a menu. that website is doomed.
Add script to popup (html block), that pop-up will automaticly close after push menu button
jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
});
});