Elementor Full Screen Navigation Templates Tutorial

Elementor Full Screen Navigation Templates Tutorial

Just launched! Checkout the CSS Course for Elementor users.

Table of Contents

In this tutorial, you are going to learn how to modify the template files you received along with the access to this article.

A great full screen navigation goes a long way to wow your clients. This should fit the bill.

Here are the demos. Click the hamburger icons on the top right corner to see them in action!

Template 1

Template 1.2

Template 2

Template 3

Template Split Screen

Features:

  • Slick Entrance Animations
  • Image Switching on Menu Items Hover
  • Menu Items Sequential Fade-In Animation (customizable)
  • Menu Items Hover Animations (customizable)
  • Customizable Navigation Icon (2 or 3 bars, color, animation)
  • Works for Sticky Headers & Static Headers
  • Lazy Loading of Images


Videos included:

  • How everything is setup
  • How to adjust and modify the nav items fading in (and how to give them another animation, such as fade in up)
  • How to adjust and modify the images in the left column
  • How to adjust the underline hover animations on the nav items
  • How to adjust the color fill hover animations on the nav items
  • How to make the nav icon look just the way you want (2 lines, 3 lines, colors, size, animation...)
  • How to adjust the animation for the navigation (speed, colors)
  • How to create your own header and make it work with the full screen navigation
  • How to finalize the setup before sending to production

What you get:

  • 10 template files (sections & columns version, containers version)
  • Lifetime access to the navigation templates & premium navigations tutorial
  • Unlimited license to use the templates on your own websites and your client's websites
  • 100% Satisfaction or Money Back within a month of purchase

Watch this trailer for a quick overview of all of this!


Now, on to the tutorial!

First, import the template of your choice in your Header

This is a premium tutorial. Purchase access to unlock the full tutorial and template files.

 

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

19 Responses

    1. Hey GrJurgen!

      I'm not certain I understand exactly what you want here.

      To verify, by 'active' nav items you mean those that match the page currently being viewed right? Would you like these to be a different color than the others?

      Here is the CSS for that, add to the nav menu > custom CSS:

      selector .elementor-nav-menu__container .elementor-nav-menu .current-menu-item a.elementor-item{
      color:#ff0000; /* color of active menu item */
      }

      If instead, you mean that you are using the text stroke setup, but want the active item filled by default, here is the CSS for that:

      #rightsection nav .current-menu-item a{
      background-position-x: 0;
      }

      Add it along with the other CSS related to the background filling in.

      Cheers!

      1. Thanks. I was trying to add hover/active etc but it didn't work.

        I used the text stroke setup and together with you're last csscode it worked. Thanks a lot!

  1. I'm getting a 'An error occurred - Please try again' error message when I try to import the demos. I've tried two different demo files, same thing.

    1. Michel wrote me in private and said that it was the 'Enable Unfiltered File Uploads’ setting that needed to be enabled. In case anyone else has the same error message!

      You will find that setting in WordPress > Elementor > Settings > Advanced.

  2. Hi Maxime,

    awesome template!
    I have only a minor questions:

    1- in my setup the hamburger inherits background color (normal and hover) from elementor-kit-(x) button (global styling for buttons). I'm not able to avoid this using custom css in order to have a transparent background. Any idea?

    Thanks,

    Filippo

    1. Try adding this CSS:

      .elementor .hamburger, .elementor .hamburger:hover, .elementor .hamburger:focus, .elementor .hamburger a, .elementor .hamburger a:hover, .elementor .hamburger a:focus{
      background-color: transparent;
      }

      And if that doesn't work, try with !important :

      .elementor .hamburger, .elementor .hamburger:hover, .elementor .hamburger:focus, .elementor .hamburger a, .elementor .hamburger a:hover, .elementor .hamburger a:focus{
      background-color: transparent !important;
      }

  3. Hi Maxime,

    just some minor questions as I'm finishing it for my website.

    1) when the full screen nav opens I have an horizontal scrollbar appearing for a moment:
    I added "overflow-x: hidden" in HTML (nav section), am I right?

    3) I'm using the two lines hamburger layout, do you think is possible to have one line shorter?

    2) Using Perfmatters lazy loading I have an issue: nav menu shows only one image (no image change on hover), and If I exclude the images in the plugin field I end up with all images loaded on page load.

    Many thanks

    1. Hey!

      1. My code already accounts for this... as you can see from my demos there is no horizontal bar showing up. I would need to see your page to see why there is one in your case.

      2. I can't guarantee lazy loading with every plugin that offers it out there, as there are quite a lot. I would suggest lazy loading your images using another plugin that will support this navigation setup. Most of them should work.

      3. Yes this is possible! Send me your page I will get you the code.

  4. Important note: The templates are all the two columns layout. Watch the video ‘Making it single column’ to learn how to make it the single column layout.

    If you are going to say this why not just put a link. Navigating your site is confusing.

    1. Hey Josette. Sorry about that.

      I followed your recommendation and added the link.

      I'm working on improving the processes and clarity on my website. Keep in mind that this is mostly a labor of love, and a single man operation. I have limited resources. Hope you understand.

      1. Yup - giving the icon the classname hamburger worked a treat - now to sort out the rest...

        Thanks John

  5. So I want this page to toggle on when someone hits the hamburger in my header - I have a separate Home Page - so do I need to put some html on each page? If so - which html?

    Sorry - tried hard but...Octogenarian I'm afraid

    1. Everything related to the navigation should go in your Header template.

      Ideally you would extract the template of your choice there, and then work from there.

      Having it in your header template, it should now show up on all of your pages automatically.

Leave a Reply