burgerexpandmenu

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    var $originalNav = $('nav.header-menu-nav-list');
    if (!$originalNav.length) return;
    var megaMenuHTML = '<section class="mega-menu"><div class="mega-menu__inner">';
    megaMenuHTML += '<div class="mega-menu__row mega-menu__row--home"></div>';
    megaMenuHTML += '<div class="mega-menu__row mega-menu__row--columns">';
    megaMenuHTML += '<div class="mega-menu__col mega-menu__col--1"></div>';
    megaMenuHTML += '<div class="mega-menu__col mega-menu__col--2"></div>';
    megaMenuHTML += '</div></div></section>';
    var $megaMenu = $(megaMenuHTML);
    var $homeRow = $megaMenu.find('.mega-menu__row--home');
    var $col1 = $megaMenu.find('.mega-menu__col--1');
    var $col2 = $megaMenu.find('.mega-menu__col--2');
    var menuItems = [];
    $originalNav.find('[data-folder="root"] > .header-menu-nav-folder-content > .header-menu-nav-wrapper > .header-menu-nav-item').each(function() {
      var $item = $(this);
      var $link = $item.find('> a');
      var href = $link.attr('href');
      var folderId = $link.attr('data-folder-id');
      var isActive = $item.hasClass('header-menu-nav-item--active');
      var $content = $link.find('.header-menu-nav-item-content').clone();
      $content.find('.header-dropdown-icon, .visually-hidden').remove();
      var text = $content.text().trim();
      var $folderTitle = $link.find('.header-nav-folder-title-text');
      if ($folderTitle.length) {
        text = $folderTitle.text().trim();
      }
      
      var menuItem = {
        level: 1,
        text: text,
        href: href,
        isActive: isActive,
        children: []
      };
      if (folderId) {
        $originalNav.find('[data-folder="' + folderId + '"] .header-menu-nav-item').not('.header-menu-controls').each(function() {
          var $subItem = $(this);
          var $subLink = $subItem.find('> a');
          var subHref = $subLink.attr('href');
          var subText = $subLink.find('.header-menu-nav-item-content').text().trim();
          
          menuItem.children.push({
            level: 2,
            text: subText,
            href: subHref,
            isActive: false
          });
        });
      }
      
      menuItems.push(menuItem);
    });
    
    // Create menu item helper
    function createMenuItem(item) {
      var activeClass = item.isActive ? ' header-menu-nav-item--active' : '';
      var ariaCurrent = item.isActive ? ' aria-current="page"' : '';
      return '<div class="container header-menu-nav-item level-' + item.level + activeClass + '">' +
             '<a href="' + item.href + '"' + ariaCurrent + '>' +
             '<div class="header-menu-nav-item-content">' + item.text + '</div>' +
             '</a></div>';
    }
    
    // Add items
    // Index 0: Home 
    // Column 1: About Us (+ children), Program (+ children), Contact Us
    // Column 2: Application (+ children), Get Involved (+ children)
    menuItems.forEach(function(item, index) {
      var itemHTML = createMenuItem(item);
      
      if (index === 0) {
        // Home
        $homeRow.append(itemHTML);
      } else if (index === 1 || index === 2 || index === 5) {
        // Column 1: About Us, Program, Contact Us
        $col1.append(itemHTML);
        item.children.forEach(function(child) {
          $col1.append(createMenuItem(child));
        });
      } else {
        // Column 2: Application, Get Involved
        $col2.append(itemHTML);
        item.children.forEach(function(child) {
          $col2.append(createMenuItem(child));
        });
      }
    });
    $originalNav.replaceWith($megaMenu);
    
  });
})(jQuery);
</script>
<style>
:root {
  /* Layout */
  --mega-menu-max-width: 1200px;
  --mega-menu-responsive-width: 92vw;
  --mega-menu-col-gap: 80px;
  --mega-menu-col-gap-tablet: 80px;
  --mega-menu-row-gap-home: 28px;
  --mega-menu-row-gap-columns-tablet: 18px;
  --mega-menu-row-gap-columns-mobile: 48px;
  --mega-menu-item-gap: 28px;
  --mega-menu-item-gap-tablet: 5px;
  
  /* Typography */
  --mega-menu-font-size-l1: 40px;
  --mega-menu-font-size-l1-tablet: 36px;
  --mega-menu-font-size-l2: 32px;
  --mega-menu-font-size-l2-tablet: 28px;
  --mega-menu-font-size-mobile: 14px;
  --mega-menu-line-height: 1.15;
  
  /* Spacing */
  --mega-menu-indent-l2: 64px;
  --mega-menu-indent-l2-tablet: 40px;
  --mega-menu-padding-l2: 20px;
  
  /* Colors */
  --mega-menu-color: #000;
}

.mega-menu {
  color: var(--mega-menu-color);
}

.mega-menu a {
  color: inherit;
  text-decoration: none;
  margin: 0 !important;
}

.mega-menu__inner {
  max-width: min(var(--mega-menu-max-width), var(--mega-menu-responsive-width));
  margin: 0 auto;
}

.mega-menu__row--home {
  margin-bottom: var(--mega-menu-row-gap-home);
}

.mega-menu__row--columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--mega-menu-col-gap);
  row-gap: 0;
}

.mega-menu__col {
  display: flex;
  flex-direction: column;
  gap: var(--mega-menu-item-gap);
}

.header-menu-nav-item {
  padding: 0 !important;
}

.header-menu-nav-item-content {
  line-height: var(--mega-menu-line-height);
}

.header-menu-nav-item.level-1 .header-menu-nav-item-content {
  font-size: var(--mega-menu-font-size-l1);
}

.header-menu-nav-item.level-2 {
  padding-left: var(--mega-menu-indent-l2);
}

.header-menu-nav-item.level-2 .header-menu-nav-item-content {
  font-size: var(--mega-menu-font-size-l2);
  padding-left: var(--mega-menu-padding-l2) !important;
}

.header-menu-nav-item a:focus-visible .header-menu-nav-item-content,
.header-menu-nav-item a:hover .header-menu-nav-item-content {
  text-decoration: underline;
}

/* Tablet & Mobile */
@media screen and (max-width: 991px) {
  .mega-menu__row--columns {
    grid-template-columns: 1fr 1fr !important;
    row-gap: var(--mega-menu-row-gap-columns-tablet);
  }
  
  .mega-menu__col {
    gap: var(--mega-menu-item-gap-tablet);
  }
}

@media screen and (max-width: 900px) {
  .mega-menu__row--columns {
    grid-template-columns: 1fr;
    row-gap: var(--mega-menu-row-gap-columns-mobile);
  }
  
  .header-menu-nav-item.level-1 .header-menu-nav-item-content {
    font-size: var(--mega-menu-font-size-l1-tablet);
  }
  
  .header-menu-nav-item.level-2 {
    padding-left: var(--mega-menu-indent-l2-tablet);
  }
  
  .header-menu-nav-item.level-2 .header-menu-nav-item-content {
    font-size: var(--mega-menu-font-size-l2-tablet);
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  .header-menu-nav-item-content {
    font-size: var(--mega-menu-font-size-mobile) !important;
  }
}
</style>