Elementor Full Screen Split Navigation Made Easy!

Table of Contents

A pretty full screen navigation goes a long way to wow your visitors, and let them know you have good taste.

This tutorial will show you how to easily create a pretty full screen navigation with Elementor, WITHOUT using popups! Which is very important, because Elementor pop ups aren't good for SEO.

Check out the demo here!

How to create your full screen Elementor navigation

First, create your header as you normally would. Then add the icon of your choice (that will trigger the navigation open), and give it the CSS class name 'navicon'.

Then, create a new section with 2 columns. Set the content width to full width, gaps to no gap, height to min height 100vh, column position to Stretch, and vertical align to Middle.

Give the section a background color of your choice, black works well.

And give it the CSS ID 'navsection'.

Under responsive, reverse the column on mobile.

For the left column, add a background image, and an html element. Leave it empty for now.

In the right column, give it a different background color and a left padding of 40px.

Add an icon there with the class name 'navicon'. That will close the navigation.

Add any other elements you want in there... you will probably want a 'nav menu', maybe a heading or text elements, social icons, etc.

Finally, copy paste all this code in the HTML element.

The code needed:

<script>
   document.addEventListener('DOMContentLoaded', function() {
   jQuery(function($){
       let navsection = $('#navsection');
       let navicon = $('.navicon');
       let opened = false;
       navicon.on('click',function(){
           if (!opened){
               navsection.show();
               setTimeout(function(){
                   navsection.addClass('active');
               },9);
           opened = true;
           } else {
               navsection.removeClass('active');
               setTimeout(function(){
                   navsection.hide();
               },609);
               opened = false;
           }
       });
       function keyPress(e) {
        if (e.key == "Escape") {
            navsection.removeClass('active');
               setTimeout(function(){
                   navsection.hide();
               },609);
               opened = false;
        }
    }
    document.addEventListener("keyup", keyPress);
   }); });
</script>
<style>
   .navicon{
   cursor: pointer;
   }
   #navsection {
        display: none;
   position: fixed;
   z-index: 9999;
   left: 0;
   top: 0;
   transition : background-color .6s ease, opacity .4s ease .6s; 
   pointer-events: none;
   opacity: 0;
   background-color: #00000000;
   }
   #navsection > div {
   min-width: 100vw;
   }
   #navsection.active {
   transition : background-color .6s ease, opacity 0s; 
   background-color: #000000;
   opacity: 1;
   pointer-events: all;
   }
   #navsection .elementor-column:not(.elementor-field-group){
   transition : transform .6s ease;
   }
   #navsection .elementor-column:not(.elementor-field-group):nth-child(1){
   transform: translateX(-101%);
   }
   #navsection .elementor-column:not(.elementor-field-group):nth-child(2){
   transform: translateX(101%);
   }
   #navsection.active .elementor-column:not(.elementor-field-group){
   transform: translateX(0);
   }
   /* for single panel on mobile
   @media (max-width:767px){
   #navsection .elementor-column:not(.elementor-field-group):nth-child(1){
   display: none;
   }
   }*/
   /* More subtle animation on mobile
   @media (max-width:767px){
   #navsection .elementor-column:not(.elementor-field-group):nth-child(1){
   transform: translateY(101%);
   }
   #navsection .elementor-column:not(.elementor-field-group):nth-child(2){
   transform: translateY(-101%);
   }
   #navsection.active .elementor-column:not(.elementor-field-group){
   transform: translateY(0);
   }
   }
   */
   /* More fancy animation on mobile */
   @media (max-width:767px){
   #navsection .elementor-column:not(.elementor-field-group):nth-child(1){
   transform: translateY(-101vh);
   }
   #navsection .elementor-column:not(.elementor-field-group):nth-child(2){
   transform: translateY(101vh);
   }
   #navsection.active .elementor-column:not(.elementor-field-group){
   transform: translateY(0);
   }
   }
</style>

Finally, enjoy your new Elementor full screen split navigation!

Enjoy your new Elementor full screen split navigation! Watch the video for more instructions, there are a few exclusive goodies in there!

Comments

11 Responses

  1. Hi
    Thank you for the detailed explanation and the code. I really liked the full screen effect!
    I tried to create such an effect and faced one problem (at least for now): I don’t have access to the sub menu. I can see the little arrow signifying that there is a sub menu, but when I click on it nothing happens.
    I the editing mode of Elementor I can see the sub menu (when clicking the little arrow) – it on the left-hand side of the right column (I’m using Hebrew on my website, so it’s right to left).
    Can you kindly help me solve that issue?
    Will greatly appreciate your help.
    Thanks

    1. Hi there

      I am facing the same problem. And the close button on the menu section doesn't work either, so once the menu is shown I can't close it. Is there a workaround for this problem?
      Thank you

      1. Hey Robert! Could you share with me your page URL so that I can have a look at both of these problems?

      2. Hi Maxime,

        It turned out that the browser cache was the problem. It works perfectly. Thank you

  2. Hi Maxime
    Please check the following URL: miniyut.org/test
    I realized what the problem is, but I wasn't able to completely solve it. It seems that the sub menu was hidden by the picture on the left. I changed the z-index of the section to 9000 and set the z-index of the right column to 9999. I was able to see the menu on top of the left picture. However, it is very far from the main menu (it starts on the left edge of the right column). It can be seen in desktop mode (although it doesn't look nice since it's too far from the main menu), but I can't see it in mobile mode. I think that it's because of the wide gap between the main menu and the sub menu.
    Any idea how I can fix it?
    Thank you in advance for any support.

  3. This is really cool. As another person mentioned, it doesn't seem to account for a Sub-Menu or nested menu. Any workarounds for that? Many Thanks

    1. In the other comments you will find the solution for this as well.

      Here it is again : Increase the z index of the column with the nav menu, and / or for the nav element, go under advanced > positioning > width > inline(auto).

Leave a Reply