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

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> jQuery(document).ready(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> jQuery(document).ready(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>

window.onload = 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.

Et voila! Thanks for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *