Full Screen Menu Elementor Pro

Full screen menu Elementor Pro tutorial! Get Elementor Pro: kaycinho.com/elementorpro (affiliate) - Chapters included.
In this tutorial, I'll teach you how to create a slick and modern animated full screen navigation menu with Elementor Pro.
And of course, not only do I cover the desktop version, but also the tablet and mobile versions.
I love web design, and with tools such as WordPress and Elementor Pro, I'm really able to focus on my creative skills which imply design, ui, but also ux.
These type of full screen menus used to require html, css and js coding, and if you are a web developer, you probably love that (personally I love css!). But if you are more on the designer side, not having to deal with code can be a game changer.
So with WordPress, Elementor Pro and a bit of creativity, sky is literally the limit.
TOOLS I LOVE:
- Elementor Pro (affiliate): kaycinho.com/elementorpro
- Astra Pro (affiliate): kaycinho.com/astra
- Crocoblock (affiliate): kaycinho.com/crocoblock
- Wirementor (my own tool): kaycinho.com/wirementor
MORE LINKS:
- Wirementor demo (built by me): kaycinho.com/wirementordemo
- A2 Hosting (affiliate): kaycinho.com/a2hosting
ONE PAGE WEBSITE FREE COURSE
• Elementor Pro Tutorial...
GET MY HELP:
kaycinho.com/shop/consulting/
ALL MY RECOMMENDED RESOURCES:
kaycinho.com/resources/
DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
kaycinho.com/brandingtemplate
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.
TIMESTAMPS
0:00 - Full Screen Menu Elementor Pro
0:26 - Pre-requisites
1:34 - Creating The Homepage
2:41 - Creating The Responsive Header
10:13 - Creating The WordPress Menu
10:44 - Creating The Popup Menu
16:04 - Linking The Header And The Popup
17:40 - Popup Tablet Version
18:49 - Popup Mobile Version
#webdesign #elementor #elementorpro #elementormenu

[@KayCinho]

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

[@EdwenaKennedy]

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

[@carlos_hermosilla]

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

[@chrisdarrell]

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

[@KayCinho]

My pleasure!

[@RockstahRolln]

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

[@EdoardoResta]

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

[@Aziz-Ahmed-UK]

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

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

[@taixcybersafe]

Great clear and concise explanation! Thank you

[@judechiji6552]

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

[@KayCinho]

You're welcome 😊

[@jfav809]

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

[@Sugar64000]

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

[@emijacobo]

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

[@KayCinho]

Welcome on board! :)

[@jerodhammerstein8107]

Well done! Extremely helpful.

[@SamieAkilimani]

Absolutely stunning and beautiful 🤩

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

[@Pedant_Patrol]

Beautiful work as always!

[@KayCinho]

My pleasure! Thank you for your support ;)

[@tonynicosiamusic7237]

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

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

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

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

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

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

[@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?

[@salvirji4873]

This is a great video. Thanks. 😊👍

[@KayCinho]

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

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

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

[@elenascagliotti5581]

A big THANK YOU!

[@BjoernTempl]

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

[@brianholt6083]

Awesome tutorial

[@KayCinho]

Thank you! Cheers!

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

[@mohammedsharafudheen7467]

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

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

[@fabianengel4630]

Great content, thank you.

[@KayCinho]

Glad you like it Fabian!

[@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 👍

[@christinerismoen7181]

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

[@user-yl2wh5pz8n]

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

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

[@afterhourmusic8771]

i think it depends, in normal case you have a sitemap for this reason, correct me if im wrong

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

[@justgosee]

Thank you Thank you

[@vannakotorlis3338]

Thanks for the sick video :)

[@KayCinho]

Glad you enjoyed it, Vanna!

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

[@ipoint451]

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

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

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

[@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?

[@aminenajah1528]

Thank you From Morocco

[@KayCinho]

You're welcome Amine!

[@ABCProducciones2010]

Superb !!!!!

[@KayCinho]

Wow, thank you so much for the kind words!

[@heldertobias70]

thank you!

[@KayCinho]

My pleasure!

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

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

[@SteveHodges]

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

[@WILKTV_]

Thanks boss!!!

[@KayCinho]

My pleasure, Mateusz!

[@thewebstylist]

Luv! 🎉 Curious if you sell your awesome designs?

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

[@splitfield.productions3297]

Absolutely HOTttt!!

[@KayCinho]

=)

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

[@liborlepka4240]

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