How do I create a multi-column mega menu on Squarespace?

Squarespace 7.1 folder dropdowns render as a single vertical column by default. You can convert these into a multi-column mega menu by targeting the .header-nav-folder-content container and applying CSS grid.

Set the folder content to a fixed width and use grid-template-columns to create the desired number of columns. This works best when you have a large number of dropdown items organized into logical groups.

.header-nav-folder-content {
  width: 600px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 20px !important;
  left: 50%;
  transform: translateX(-50%);
}
.header-nav-folder-item a {
  padding: 8px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.header-nav-folder-item a:hover {
  background: #f5f5f5;
}