Full Screen Menu Elementor Pro

[@KayCinho]

And here is the FLEXBOX EDITION of this tutorial: kzbin.info/www/bejne/l2aQqnh-bpeSnK8

[@3mediastudiodesign]

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.

[@RockstahRolln]

Totally agree!

[@OscarObians]

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

[@AdaptorLive]

You could always put a normal menu somewhere in the footer, I guess.

[@highsite]

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.

[@RockstahRolln]

This is Beautiful! Exactly what I was looking for! Thank You!!

[@chrisdarrell]

This was a FANTASTIC and easy to follow tutorial!! Plus you get a GREAT menu!! thank you!

[@KayCinho]

My pleasure!

[@MaikholMeneces]

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

[@EdwenaKennedy]

Thank you so much!! Was searching everywhere for how to link the icon to the pop and this was perfect!

[@Sugar64000]

Thank you so much for the quality of your tut !!

[@judechiji6552]

Been looking for ways to create something like this, thank you very much! ❤

[@KayCinho]

You're welcome 😊

[@jeremyhunt5673]

Fantastic thank you! Subscribed!

[@carlos_hermosilla]

An awesome tutorial. Very well explained and easy to follow. Amazing!

[@Aziz-Ahmed-UK]

Excellent tutorial, it was worth watching it. You just got yourself a new subscriber. Thank you.

[@justgosee]

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?? :)

[@taixcybersafe]

Great clear and concise explanation! Thank you

[@SamieAkilimani]

Absolutely stunning and beautiful 🤩

[@tonynicosiamusic7237]

Grand grand merci for all I'm new subscriber from France. God Job Tony

[@gtamcgaming]

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

[@KayCinho]

Hi, I don't currently plan to release Woocommerce tutorials, but I might do so in the future.

[@roomasaher5735]

Please make tutorial on woocommeec also you're just awesome great work

[@emijacobo]

You saved my life, thank you for this excellent and dynamic tutorial, new subscriber on board!!!

[@KayCinho]

Welcome on board! :)

[@charlesvuylsteker8138]

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 :)😄

[@jfav809]

excelente video, muchas gracias por este tutorial, increíble!!!

[@Pedant_Patrol]

Beautiful work as always!

[@KayCinho]

My pleasure! Thank you for your support ;)

[@ricardovelasco3786]

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

[@brianholt6083]

Awesome tutorial

[@KayCinho]

Thank you! Cheers!

[@EdoardoResta]

Thank you so much, exactly what I was looking for. Super easy, super cool. Thank you!

[@tomsmith7960]

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

[@KayCinho]

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 ;)

[@tomsmith7960]

​@@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.

[@jerodhammerstein8107]

Well done! Extremely helpful.

[@AdalbertoHernandezVega]

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.

[@BjoernTempl]

nice, I just don't like how the hamburger and the x overlap.. is there an easy solution to fix this?

[@CyberImpact7]

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...

[@NancyBarth-x4c]

What is size of backgroud image you have used for a perfect responsive page?

[@Luzenify]

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?

[@Luzenify]

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!

[@KayCinho]

My pleasure!

[@zoltankosa-szantho6951]

Amazing tutorial! Thank you!

[@KayCinho]

My pleasure! I just released the flexbox version in case you need it.

[@zoltankosa-szantho6951]

@@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!

[@KayCinho]

@@zoltankosa-szantho6951 yes both are good 👍

[@elenascagliotti5581]

A big THANK YOU!

[@aminenajah1528]

Thank you From Morocco

[@KayCinho]

You're welcome Amine!

[@karanamsrikanth1868]

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!

[@KayCinho]

Do you build your full screen menu with Elementor Pro?

[@ares2339]

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.

[@elisalacicerchia1727]

Of course!! Thank you so much, that was awesome

[@KayCinho]

@@elisalacicerchia1727 you're welcome Elisa!

[@KelvinKaranja]

This video got me started and it turned out awesome. Thank you so much, I was almost losing a client.

[@markbriankeyer]

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.

[@KayCinho]

Thanks Mark! I've covered how to do this in this video: kzbin.info/www/bejne/pp28i2mrm9-pqLc

[@markbriankeyer]

@@KayCinho Awesome thank you. I should have known or checked the playlist. Thanks again. Appreciate all you do.

[@KayCinho]

@@markbriankeyer my pleasure :)

[@WastedPotential007]

I'm guessing this kind of menu will be useless if the end user has a popup blocker?

[@christinerismoen7181]

PLEASE HELP! I get a blue square around the X on mobile only. How to I get rid of that?? 😬👋🏻

[@fabianengel4630]

Great content, thank you.

[@KayCinho]

Glad you like it Fabian!

[@justgosee]

Thank you Thank you

[@thewebstylist]

Luv! 🎉 Curious if you sell your awesome designs?

[@gerhardbergwein4236]

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.

[@rahul_manek]

One page menu link doesnt work means it doesn't scroll it div and close the menu

[@WILKTV_]

Work, but popup doesn't close after click on menu item

[@ipoint451]

If I use a menu with anchor links, the popup doesn't close

[@RomanOpet]

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

[@gunthersturmlechner967]

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?

[@mohammedsharafudheen7467]

Hi, Can I build a website with a home page with a nav menu where the navbar opens a new full screen temlate

[@salvirji4873]

This is a great video. Thanks. 😊👍

[@KayCinho]

Glad you liked it! Thank you for taking the time to comment :)

[@vannakotorlis3338]

Thanks for the sick video :)

[@KayCinho]

Glad you enjoyed it, Vanna!

[@JUANPABLOSANTAMARIA]

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! :-)

[@heldertobias70]

thank you!

[@KayCinho]

My pleasure!

[@ABCProducciones2010]

Superb !!!!!

[@KayCinho]

Wow, thank you so much for the kind words!

[@SteveHodges]

How would you use a Lottie file for your hamburger menu?

[@viveksaini9809]

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

[@splitfield.productions3297]

Absolutely HOTttt!!

[@KayCinho]

=)

[@WILKTV_]

Thanks boss!!!

[@KayCinho]

My pleasure, Mateusz!

[@adied7725]

What about SEO with pop up menus?

[@janedang7241]

Popups are not SEO-friendly. They're not really exist in the document

[@adied7725]

@@janedang7241 I don't understand? "They're not really exist in the document"

[@janedang7241]

@@adied7725 Popups are not semantically rendered in the DOM tree. They're basically not indexable by search engines

[@adied7725]

@@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!!!

[@liborlepka]

Horrible for SEO

[@charlesmontilla]

Foda-se o SEO

[@000SilaS000]

full screen page rather than a menu. that website is doomed.

[@ipoint451]

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); }); });