Demos

Create a Wonderful Elementor Full Screen Menu​ Easily

No extra plug-ins required! Elementor Free Compatible.

Frequently asked about in the Facebook group, how to design an awesome Elementor full Screen Menu. Here it is!

To begin with, create a new section with these settings

Create this section in your header template if you want this Elementor full screen menu across your website. You can also create it on a single page. No pop ups are used.

Create a Wonderful Elementor Full Screen Menu​ Easily

Then, give it a background colour, and a CSS ID

In this example, it is named ‘rightsection’ . By using the same ID you won’t have to modify the code

Create a Wonderful Elementor Full Screen Menu​ Easily

This is the section that will be the full screen menu. Design it the way you want

Be certain that it looks good on all viewports.

Now, create an html element where you want your hamburger icon to show up

It can be in the header template. For the animated hamburger icons, download them here.

See this article for the examples to choose your preferred icon. Insert all the HTML from your preferred icon in an HTML element.

For optimal results, place it in it's own section, with an empty column on the left

Set this section z-index:99999 . Set the left column to Column Width (%) 91% for desktop, 89% tablet and 74% mobile.

Create a Wonderful Elementor Full Screen Menu​ Easily

To get the icon exactly where you want, use negative margins on that section.

Finally, when you got the section and icon all built and ready to go, add the code below in an html element

Add it wherever on the page, after the HTML element that has the hamburger.

Choose the code you want. Use only one snippet, they won’t work together on the same page.

This is the code for the plain color animation.

    
<div class='textbackground'> <div class='curtain'></div> </div> <div class='textbackgrounds'> <div class='curtains'></div> </div>


<style> #rightsection {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 999;
animation: moveOute 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
width: 100vw;
}

@keyframes moveOute {
0% {
transform: translateX(100%);
}
49% {
transform: translateX(0);
}
94% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}

.textbackground {
display: none;
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 100%;
text-align: center;
background-color: #fff;
z-index: 9999;
animation: moveOut 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.curtain {
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 100%;
text-align: center;
background-color: #ff0000;
z-index: 9999;
animation: movesOut 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.textbackgrounds {
opacity: 0;
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 100%;
text-align: center;
background-color: #fff;
z-index: 9999;
animation: moveOut 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.curtains {
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 100%;
text-align: center;
background-color: #ff0000;
z-index: 9999;
animation: movesOut 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

@keyframes moveOut {
0% {
transform: translateX(0);
}
33% {
transform: translateX(-200%);
}
59% {
transform: translateX(-200%);
}
59.6% {
transform: scaleY(.005) scaleX(0);
}
100% {
transform: scaleY(.005) scaleX(0);
}
}

@keyframes movesOut {
0% {
transform: translateX(0);
}
33% {
transform: translateX(0);
}
59% {
transform: translateX(-200%);
}
59.6% {
transform: scaleY(.005) scaleX(0);
}
100% {
transform: scaleY(.005) scaleX(0);
}
}

</style>

<script> document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function() {
$('.textbackground').toggle();
$('.textbackgrounds').toggle();
$('.textbackgrounds').css( 'opacity', 1);
$('#rightsection').fadeToggle('slow');
});
});
});
</script>

This is the code for the large icon animation. You will need to replace the roar.svg URL with  your own.

<div class='textbg'> </div>
<div class='textbgs'> </div>
<style>
#rightsection {
display: none;
position: fixed;
top: 0;
left: 0;
animation: moveOutes 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
width: 100vw;
}
@keyframes moveOutes {
0% {
transform: translateX(100%);
}
33% {
transform: translateX(0);
}
84% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
.textbg {
display: none;
background-image: url(/wp-content/uploads/2019/09/roar.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 200%;
text-align: center;
background-color: #fff;
-webkit-box-shadow: 0px 0px 19px 16px #fff;
-moz-box-shadow: 0px 0px 19px 16px #fff;
box-shadow: 0px 0px 19px 16px #fff;
z-index: 9999;
animation: moveOuts 3.8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.textbgs {
opacity: 0;
background-image: url(/wp-content/uploads/2019/09/roar.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 200%;
text-align: center;
background-color: #fff;
-webkit-box-shadow: 0px 0px 19px 16px #fff;
-moz-box-shadow: 0px 0px 19px 16px #fff;
box-shadow: 0px 0px 19px 16px #fff;
z-index: 9999;
animation: moveOuts 3.8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
@keyframes moveOuts {
0% {
transform: translateX(0);
}
89% {
transform: translateX(-200%);
}
94% {
transform: translateX(-200%);
}
96%{
transform: scaleY(.005) scaleX(0);
}
100% {
transform: scaleY(.005) scaleX(0);
}
}
.menu-mainmenu-container * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.menu-mainmenu-container li {
display: inline-block;
list-style: outside none none;
margin: 0.4pxem 0.6em;
padding: 0;
}
.menu-mainmenu-container a {
padding: 0 0.4em;
color: rgba(255, 255, 255, 0.5);
position: relative;
text-decoration: none;
display: inline-block;
}
.menu-mainmenu-container a:before {
position: absolute;
content: ";
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
left: 11%;
right: 11%;
top: 0;
bottom: 0;
border-left: 1.4px solid rgba(255, 255, 255, 0.7);
border-right: 1.4px solid rgba(255, 255, 255, 0.7);
}
.menu-mainmenu-container a:hover,
.menu-mainmenu-container .current a {
color: #ffffff;
}
.menu-mainmenu-container a:hover:before,
.menu-mainmenu-container .current a:before {
opacity: 1;
left: 0;
right: 0;
}
</style>
<script> document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function() {
$('.textbg').toggle();
$('.textbgs').toggle();
$('.textbgs').css( 'opacity', 1);
$('#rightsection').fadeToggle('slow');
});
});
});
</script>

This is the code for the simple Fade In animation.

<style>

#rightsection {
display: none;
position: fixed;
top: 0;
left:0;
width: 100vw;
z-index: 99;
}
</style>

<script>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function() {
$('#rightsection').fadeToggle('slow');
});
});
});
</script>

With the code added, your full screen section should disappear right away, and only show up on icon click

It will work better on the front-end. You will need to refresh the page in Elementor editor for it to work properly there.

If you want to prevent that Elementor full screen menu from scrolling when it is opened, add this code

This will prevent the page from scrolling in the background while the menu is active.

Add it right after the ‘ $(‘#rightsection’).fadeToggle(‘slow’); ‘ line, found near the end of the code.

if ($('.hamburger').hasClass('is-active')){
document.body.style.overflow = 'hidden';
} else{
document.body.style.overflow = 'inherit';
}

If you are using this as 'same page' navigation, and need it to close after clicing a link, add this code

Add it right after the ‘ jQuery(function($){  ‘ line

$('#rightsection a' ).click(function(){
    $('.hamburger').removeClass('is-active');
$('.textbackground').hide();
$('.textbackgrounds').hide();
$('#rightsection').fadeOut('slow');
});

Et voila! Thanks for reading!

53 Responses

  1. This is awesome!!! I’m a bit new with EPRO, I’ve just discovered your page. Can this be done for the search tool of the page? Say you have a button on the header that triggers the help field in a full screen canvas?

    1. Yes indeed, that's completely possible! A few code adjustments would be needed, so that the correct action happens when clicking the search icon, instead of the hamburger icon.

      Give your search icon a class name, and then in the code replace '.hamburger' with '.newsearchiconclassname'

  2. Just want to say that I've watched all read all of your tutorials ,Recetily implemented this one on my website, I want to thank you alot, I've learned alot and keep doing this great for everyone using Elementor

  3. I have problems with preventing the menu from scrolling. Did everything like you said. I have OceanWP as my theme. Do think the issue might be related to the theme?
    Used this code.

    if ($('.hamburger').hasClass('is-active')){
    document.body.style.overflow = 'hidden';
    } else{
    document.body.style.overflow = 'inherit';
    }

    1. It should not be theme relataed...

      The code should work fine, however I would need to see the page to see what is or is not working...

    2. Hey i'm using OceanWP and Elementor pro as well, i think the theme uses a document.html and elementor uses document.body. But using the .css selectorfor just overflow-y instead works for me -

      if ($('.hamburger').hasClass('is-active')){
      $( '.html' ).css( "overflow-y", "hidden");
      } else{
      $( '.html' ).css( "overflow-y", "scroll");
      }

    1. Maxime Desrosiers Please, I am still new to coding. I will need a clue. Do I still need to make use of html element or what? I will also like to know how I will do it if I want it to have the hamburger icon and text at the same time.

    2. Theophilus Braimah This gets out of the scope of this article... at least for now. I might add the instructions for all of this at some point though.

  4. this is great ! works wonderfully thanks ! The hamburger is nice and tasty 🙂
    how can I close the full screen menu when user clics on a menu item which is actually an anchor that scrolls to the right section in the page ?
    I'm using this on a one page scroling

  5. Hi! Do you think it will be possible that on the left column will show up the submenu for each menu?

    MenuA
    ->submenuA1
    ->submenuA2
    ...
    MenuB
    ->submenuB1
    ->submenuB2
    ....

  6. How to change the color of the cloe button only? I tried to change it, but it also changed the color of the hamburger icon. I want the hamburger icon tp stay black and the close icon to be white. Is that possible?

    1. Change the color of background here:

      .hamburger.is-active .hamburger-inner,
      .hamburger.is-active .hamburger-inner::before,
      .hamburger.is-active .hamburger-inner::after {
      background-color: #000; }

  7. This is great, thanks. I can't seem to get the hamburger colour to white. Its curently black. I've updated background-color to white but no change. I can't see any black color codes anywhere either so am not sure why its black. any ideas?

    1. You are on the right path.. it's in the code for the hamburger. You should find a few #000 , change to your color... if it doesn't work somehow, try adding !important

  8. Hi,
    Thanks a lot for this tutorial. I just have one question, is it normal that when you open the menu all ellement are animated at the same time without taking my animation delay ? Maybe you have a solution, thanks a lot again

    1. Alright... I think it's because of the way Elementor coded this. Their delay only applies when it's their own setup changing the visibility from display:none to display:block. I could fix this with code, but it would require some work...

    1. Maxime Desrosiers Hi, redo and it working for mobile version. do you have any post on how to make this custom header to be transparent header instead of changing margin. Also, without the Elementor Pro, is it possible to have sticky header?

  9. Is it possible to only do a z-index 9999 on the hamburger if it's placed in the row of the header? Because now I get the full header including the logo in front of my full screen menu. I tried to put the hamburger in a different row below the header with a higher z-index, and put a negative marge on it. But that's causing layout problems due to the different desktop screen sizes. Hopefully you can help me out!

    1. It's possible but the setup is easy to mess up, that's why I proposed that other way with a different section... Share me your page with the hamburger placed where you want it, and I will let you know how to make it work!

  10. Thanks for the great tutorial! One question, how can I make the full-screen menu scrollable? In my case I need it especially in the mobile view. Thanks a lot!

  11. Hello and thank you for this tutorial ! When I put the code for the plain color the display none makes everything disappear even the hamburger icon, I have a main section + another section where I put the hamburger html element + my logo and the html element for the plain color is on the main section. Thank yo ufor your answer

    1. The '#rightsection' section should not have the hamburger within it. It's normal for the #rightsection to disappear with the CSS... to edit it, remove the CSS code temporarily.... then add it back after it looks the way you want.

  12. Hi Maxime, this has been tremendously helpful. Thank you (and Jonathan) for your help!

    I have a question: do you know how I can adjust the size of the hamburger?

    1. Welcome Shaun! The most simple way to adjust the size of the hamburger is by using the transform:scale CSS property.

      In the CSS for the hamburger, under .hamburger class, add

      transform:scale(0.9);

      This will make it 90% of it's current size.

  13. Hey Maxime, just want to tap on your expertise again. Regarding the code that prevents the page from scrolling in the background while the menu is active, it prevents my menu from scrolling when viewing it on mobile (since I have numerous elements there). How would one make it so that the code is only enabled on desktop and tablet?

  14. Hi Maxime, thanks for this great tutorial 🙂

    Only thing that doesn't work in my case is preventing the background page from scrolling.
    I have placed the code as you described above but the page ist still scrolling in the background (tested on iOS with Firefox, Chrome & Safari). Any idea what I could have done wrong?

    1. No, not even close. It's very common for navigation to be hidden... indeed, on mobile, that's almost always the case.

      Google knows this, of course, and doesn't penalized for navigation sections that are display none.

      Elementor Pro Popup, are NOT display:none. They are not part of the DOM at all, so Google doesn't index any of their content, at all. Quite a major difference.

  15. is it possible to change the code so that after clicking on the menu (link) inside this "not-popup", the closing animation would appear in the same way as if you press the X closing button? Otherwise it is inconsistent : pressing X looks cool, but pressing link is just doing a quick jump

Leave a Reply