Vertical Icon Collapse Menu With Elementor Pro

Get Elementor Pro

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

• see an example of this type of navigation on wirementor.com

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 channel – It 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!