Elementor Full Screen Navigation Templates Tutorial
Get Premium

Elementor Full Screen Navigation Templates Tutorial

Element.How also offers premium tutorials! Check them here:

Elementor Full Screen Navigation Templates Tutorial

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.

Elementor Full Screen Navigation Templates Tutorial

Access tutorial

$39/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial:
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 30 day money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

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

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

21 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!

  2. 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.

    2. 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.

  3. 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;
      }

  4. 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.

  5. 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

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

    1. Greetings Ooh!

      For this it might be better to have another icon inside your rightsection navigation container, a X icon only, and place it where you want.

      Then, give it the class name 'close-nav-icon'.

      Finally, directly after the line

      document.addEventListener('DOMContentLoaded', function() {

      add this JavaScript:

      let closeNavIcon = document.querySelector('.close-nav-icon');

closeNavIcon.addEventListener('click', function() {
   closeNav();
});

      Cheers!

Leave a Reply

Elementor Full Screen Navigation Templates Tutorial

Resources

Premium

Account

Discounts

Facebook Youtube Envelope

© Copyright 2024 Element How
Privacy Policy | Terms & Conditions