Elementor Full Screen Split Navigation Made Easy!

Elementor Full Screen Split Navigation Made Easy!

Just launched! Checkout the CSS Course for Elementor users.

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);
               document.body.style.overflow = 'hidden';
           opened = true;
           } else {
               navsection.removeClass('active');
               setTimeout(function(){
                   navsection.hide();
               },609);
               document.body.style.overflow = 'inherit';
               opened = false;
           }
       });
       function keyPress(e) {
        if (e.key == "Escape") {
            navsection.removeClass('active');
               setTimeout(function(){
                   navsection.hide();
               },609);
               document.body.style.overflow = 'inherit';
               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!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

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

  4. Thanks first for the great tutorial! It works great, I just have a problem with the links (anchor on onepager) . When I click on a menu item the split menu does not close. Would be very happy about an answer. Thanks!

    1. Hey Eve! Welcome!

      Add this code

      $('#navsection a').click(function(){
      navicon.eq(0).click();
      });

      right after this line:
      document.addEventListener("keyup", keyPress);

      Let me know if it works!

      1. Hi, thanks for the code!
        I have the same problem as Eve. The new line of code is not working.
        Any idea how I can fix it?
        Thanks
        Kamil

  5. Hey!

    Thankyou so much for creating this navigation tutorial its so sleek and you did a great job of explaining how to accomplish the finish effect.
    I have one issue though everytime i click on a menu item it refreshes the menu it doesnt create a drop down of the sub menu items.
    You can check it out on...
    aphrodites.uk
    Thanks
    Kim

  6. This is a great solution for an SEO friendly flyout menu - I do have a question though. Is there a way to have a transparent overlay instead of the image column that will still show the site behind it? I tried just putting a transparent gradient background instead of the image. It shows while behind the transparency and not existing content. (Which makes sense from reading the code above).

    I'm currently using the popup option (build a popup in elementor and link the hamburger menu icon to the popup) and after reading about how SEO unfriendly that is, I'm trying to find a "look alike" workaround for a client site. They are crazy about the gradient I used with their brand colors as the transparent overlay to the site when the menu popup is open.

    vistaonlinedemo.com is the example site.

    1. Hey !

      In the code, you will find this:

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

      change to

      #navsection.active {
      transition : background-color .6s ease, opacity 0s;
      background: *gradient here*;
      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%);
      opacity:0;
      }
      #navsection .elementor-column:not(.elementor-field-group):nth-child(2){
      transform: translateX(101%);
      }

  7. Hi Maxime,

    Thank you so much for the awesome explanation and code.
    I tried and works perfectly, managed to change transition to vertical instead of horizontal as well.

    I just wanted to ask, is there anything that can be tweaked in order to add a fade out to the columns when press X or Esc to close?
    As I am using big type on the left half and when closing with X/Esc the letters stay on screen longer than the column background itself, so they overlap whatever is underneath the split screen :'D

    Thanks again!
    Iv

    1. Hey Ivona!

      Try changing this line of code

      transition : background-color .6s ease, opacity .4s ease .6s;

      to

      transition : background-color .6s ease, opacity .4s ease;

  8. Tremendous video. I've implemented what you've explained and it works great! However I have an issue, I would want the menu to be scrollable on mobile. I have a menu with links that opens toggles (dropdowns), however when several open the content, it goes over the screen and people can't scroll down to reach it. They have to close the toggles for the content to appear in ther screen. This is the site https://footballgoals.store/

  9. Hi Maxime

    Great Video. I'm been searching for a SEO friendly full screen menu for some time and this definitely seens to be the answer.

    Do you happen to have a solution to allow the overlay to be scrollable? At the moment I have two columns - one with my logo and menu in, the second with direction links, and booking buttons. I'd like on mobile to keep both columns but allow the user to be able to scroll. At the moment the solution seems to continue scolling the website in the background.

  10. Hi Maxime,
    Thank you so much for this great full screen menu! Most importantly, that it's SEO friendly too!!!
    I was able to implement everything but there's one thing I noticed (always something right?)
    While I chose the 'None' for the Tablet and Mobile breakpoints for hamburger menu, it still showed up in my header.
    I then went and assigned it the class of 'navicon' and that worked. So basically, I'm using this to trigger the full-size menu, but, I noticed, that despite opening the beautiful menu I made, it also opens the default menu that would normally open with the hamburger menu ( I can just see it for a split second in the background)!
    Any ideas?
    It may be something really simple I'm missing right now..!?

    Thank you so much Maxime!!

    1. Hey Andonis!

      Hmm you should not be seeing your default mobile nav... I can't say what's the problem though, not without seeing the page.

  11. Hi Maxime,

    Great solution. My gratitude is great.
    One small issue. When the page with menu is loading, the hidden section is still visible for a split of a second. I've tried several things but can't find a way to solve this. Any idea?

    1. Hey Tanya!

      Try moving all the CSS (part in between the <style> tags) to the customizer > Additional CSS.

      That should fix this!

  12. Thank you for this tutorial! This is an amazing nav menu I'm trying out. It was easy to follow step by step. However, I have one question, when I view it in Inspect and on Apple Iphone setting, the menu icon goes under my logo instead of staying on the top right corner. Do you have a solution?

    1. z index can be though, particularly on Safari / iOS, which doesn't manages quite the same way as Chromium based browsers.

      I would need to see your site to help you out here.

  13. Hi.
    thanks a lot for your wonderful tutorial's 🙂
    something weird, if i open the nav menu in page, and close it by the close icon, i cant scroll the page at all, till I refreshing the page (talking about mobile).
    I tried to create everything in new page, I turned off all possible plugins and none...
    did you heard something like that? any idea for this issue?
    THANK YOU

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.