Vertical Icon Collapse Menu With Elementor Pro

Let's recreate the #WordPress collapsible menu with #ElementorPro and some JS! DDDD

Vertical Icon Collapse Menu With Elementor Pro

Vertical Icon Collapse Menu anyone? Yes I’m talking about the same type of navigation you find in the WordPress back-end!

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).

Timestamps

  • 00:14 – What we’re going to build
  • 02:40 – What you need to complete this project
  • 03:51 – Tutorial Outline
  • 04:26 – Pre-requisites
  • 12:55 – Fullscreen Mobile Navigation Popup
  • 17:48 – Header & Footer
  • 23:38 – Creating the single “page template”
  • 28:37 – Extended Vertical Navigation
  • 38:42 – Collapsed Vertical Navigation
  • 45:16 – Debugging
  • 49:41 – Conclusion

Vertical Icon Collapse Menu

hello, I’m your host Kaycinho, I’m the digital alchemist. In today’s tutorial I’ll show you how to build a beautiful vertical menu with icons. As mentioned, that menu can collapse / expand, and most of all: it can remember your preference! Vertical Icon Collapse Menu Tutorial Please follow the tutorial in the video above, but as a reference here are the steps outlined as well as the code you will need to copy and paste. Enjoy!

Vertical Icon Collapse Menu Tutorial

What we’re going to build

  • a collapse / expand vertical menu with icons
  • an html5 storage item to remember user preferencecs

What you need to complete this project

  • Astra theme (free version)
  • Elementor (free version)
  • Elementor Pro (pro version)
  • Premium Addons for Elementor (free version)
  • Simple Custom Css and JS (free version)

01 – Vertical Icon Collapse Menu Pre-requisites

  • install plugins
  • install the theme
  • setup Premium Addons for Elementor
  • create the required popups (no styling yet)
  • add the JS code below:
if (window.innerWidth > 1024) { // code for large screens 
  window.onload = function() {  	
      var navstatus1 = localStorage.getItem('state1', '');
      localStorage.setItem('state1', navstatus1);
      if (navstatus1 == 'collapsed') {
        document.getElementById("elementor-popup-modal-3615").style.setProperty("display", "none", "important");
        document.getElementById("mynav-main").style.marginLeft = "65px";
        document.getElementById("myfooter-main").style.marginLeft = "65px";
      }
      else {
       document.getElementById("elementor-popup-modal-3612").style.setProperty("display", "none", "important");
       document.getElementById("myfooter-main").style.marginLeft = "300px"; 
      }
  }
} else {
	document.getElementById("mynav-main").style.marginLeft = "0";
}

02 – Fullscreen Mobile Navigation Popup

03 – Header & Footer

  • setup a custom header (tablet & mobile only)
  • setup a custom footer
add the following css ID to the footer section:
myfooter-main

04 – Create a single “page template”

add the following css ID to the main section:
mynav-main

05 – Extended Vertical Navigation

add the following JS code to the main Premium Button:
localStorage.setItem('state1', 'collapsed');
window.location.reload();

06 – Collapsed Vertical Navigation

add the following JS code to the main Premium Button:
localStorage.setItem('state1', 'extended');
window.location.reload();

Debugging

  • if you don’t get it right from the first try, you may not see changes reflected
  • a quick tip is to change the name of the variable + html 5 item, as shown in the video
  • then in Wp Admin > Elementor > Tools, click on Regenerate Css, then click on save

Conclusion

So I hope that you enjoyed this tutorial! As mentioned in the video, this may not be the best way to do it, but at least it’ll get you started! And I’ll probably come up with another way of achieving this, in an updated tutorial. Question of the day: what’s your favorite type of navigation, and why? If you watched the companion video and if you like it, please give it a thumbs up, as it helps growing my Youtube channelIt does really (did I mention REALLY?) help me! Also, if you know someone that could benefit from this tutorial, would you share it now? Also, if you want to grow your creative business / career, make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy and tips, tools, services and case studies that can help you grow your business online. So, that’s it for this one, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
>
Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

Cookies essentials to the navigation on this website.

Cookies used to remember your choices regarding privacy.

Decline all Services
Accept all Services

Join me on YouTube

subscribe & get exclusive tips to be your own boss

Brand, market

& grow online

​By subscribing you accept to receive my newsletter and occasional marketing offers. Unsubscribe anytime.

close
Scroll to Top

My Account

Featured

Check out the shop!

Subscribe to my newsletter