Show Folder Items As a Dropdown on Mobile Menu

What does this code do?

This code snippet will allow you to display the folder items underneath the folder title on mobile rather than on a separate page.

Note: I have provided two options. Option one has all the pages display right away and Option two has the folder pages slide down from the title when clicked.

Option #1: Static

This option will have all the pages display right away. The folder contents will display under the folder title.

Code Snippets

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Folders in Mobile Menu -->
<script>
(function () {
 var headerNavFolders = document.querySelectorAll('.header-menu-nav-list .header-menu-nav-folder:not([data-folder="root"])');
  
 for (let i = 0; i < headerNavFolders.length; i++) {
  var folderURL = headerNavFolders[i].getAttribute("data-folder");
  var dropdownFolder = document.querySelector('[data-folder="'+ folderURL +'"] .header-menu-nav-folder-content');
  
  var rootFolder = document.querySelector('[data-folder-id="'+ folderURL +'"]').closest(".header-menu-nav-item");
  
  rootFolder.append(dropdownFolder);
  
  //pointer events on folder title
  document.querySelector('[data-folder-id="'+ folderURL +'"]').style.pointerEvents = "none";
  
  //hide original folder
  document.querySelector('[data-folder="'+ folderURL +'"]').style.display = "none";
 
}  
})();
</script>

<!-- End of Folders in Mobile Menu -->

Then copy and paste this into Design > Custom CSS.

/* Folders in Mobile Menu */
.header-menu-nav-folder {
  transform: unset;
}
.chevron--right {
  transform: rotate(135deg); /* Turns Arrow Down */
  margin-left: 2vw; /* Space Between Arrow and Folder Title */
}
.header-menu-controls {
  display: none;
}
.header-menu-nav-folder-content {
  margin-bottom: 2vw; /* space below the last folder item */
}
a[data-folder-id] + .header-menu-nav-folder-content a{
  font-size: 1.3rem !important; /* Font Size of Folder Items */
}

Then customize the spacing and font size.

Option #2: Animated

This option will have the pages in the folder slide down from the folder title when clicked.

Code Snippets

Copy and paste this code into Settings > Advanced > Code Injection > Footer

<!-- Folders in Mobile Menu -->
<script>
(function () {
  var headerNavFolders = document.querySelectorAll('.header-menu-nav-list .header-menu-nav-folder:not([data-folder="root"])');

  for (let i = 0; i < headerNavFolders.length; i++) {
    var folderURL = headerNavFolders[i].getAttribute("data-folder");
    var dropdownFolder = document.querySelector('[data-folder="' + folderURL + '"] .header-menu-nav-folder-content');

    var rootFolder = document.querySelector('[data-folder-id="' + folderURL + '"]').closest(".header-menu-nav-item");

    rootFolder.append(dropdownFolder);
    
    // hide folder to start
    dropdownFolder.style.opacity = "0";
    dropdownFolder.style.visibility = "hidden";
    dropdownFolder.style.transition = "all 2s";
    dropdownFolder.style.maxHeight = "0";
    
    //pointer events on folder title    
    rootFolder.onclick = function () {
      var dropdownPages = this.querySelector('.header-menu-nav-folder-content');
      if (dropdownPages.style.opacity == "0") {
       dropdownPages.style.opacity = "1";
       dropdownPages.style.visibility = "visible";
       dropdownPages.style.maxHeight = "100vh";
      } else {
       dropdownPages.style.opacity = "0";
       dropdownPages.style.visibility = "hidden";
       dropdownPages.style.maxHeight = "0";
      }
    }; 
    
    //hide original folder
    document.querySelector('[data-folder="' + folderURL + '"]').style.display ="none";
  }
})();
</script>

<!-- End of Folders in Mobile Menu -->

Then copy and paste this into Design > Custom CSS.

/* Folders in Mobile Menu */
.header-menu-nav-folder {
  transform: unset;
}
.header-menu-nav-folder--open {
  transform: translatex(0) !important;
}
.chevron--right {
  transform: rotate(135deg); /* Turns Arrow Down */
  margin-left: 2vw; /* Space Between Arrow and Folder Title */
}
.header-menu-controls {
  display: none;
}
.header-menu-nav-folder-content {
  margin-bottom: 2vw; /* space below the last folder item */
}
a[data-folder-id] + .header-menu-nav-folder-content a{
  font-size: 1.3rem !important; /* Font Size of Folder Items */
}

Then customize the spacing and font size.

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the spacing and font size.