Splitting Long Menu Columns into 2 (Impulse Theme)

Store Design

Topic summary

Issue: In the Shopify Impulse theme, dropdown menu columns (notably HIRE and SHOP) were too long. The goal was to split long lists into two side-by-side columns.

Progress:

  • Initial CSS (column-count: 2 on .site-nav__dropdown at ≥768px) worked for single-level dropdowns but not for multi-level structures, resulting in narrow single columns.
  • An interim suggestion added scrolling via max-height and overflow, which reduced height but did not create two columns.

Resolution:

  • A flexbox-based CSS solution at ≥768px targeted .site-nav__dropdown’s multi-level layout: set .medium-up–one-fifth to display:flex with flex-wrap, adjusted grid alignment, made section headers full-width, and set inner divs to 50% width. This effectively split subcategory lists into two columns.

Outcome: The requester confirmed the final CSS achieved the desired two-column layout. No JavaScript changes were needed. Discussion concluded as resolved.

Notes: Code snippets are central to understanding the solution.

Summarized with AI on January 4. AI used: gpt-5.
1

Hi there, hope someone can help and thanks so much in advance.

I am using Impulse theme.
My menu dropdown columns are way too long, I would love to have them split into 2 columns. Can anyone please help me with some code, I have searched and searched to do it myself by no luck.

https://40565c-2.myshopify.com/

Password: LSOHC

Thanks a million

2

Hi @aliciavterrible , Welcome to the Shopify Community!

You can split your menu dropdown columns into two columns using custom CSS.

Here’s a simple code snippet to achieve that:

@media screen and (min-width: 768px) {
  .site-nav__dropdown {
    column-count: 2;
    column-gap: 20px; /* Adjust as needed */
  }
}

You can add this CSS code to your theme’s Additional CSS or to your stylesheet. This code applies a two-column layout to your menu dropdown when the screen width is at least 768 pixels.

Feel free to adjust the column-gap value to control the spacing between the columns.

Hope this helps! Let me know if you have any questions or need further assistance.

3

Thank you, but the results are not as I hoped. Made the columns skinny but didn’t break the long column into two separate shorter ones..
Specifically focusing on the HIRE and SHOP columns.

4

So we need to check the code.

5

It’s working on the dropdowns that only have one level, but not working on the dropdowns that are showing multiple levels. There might be another line of code I can add in so it works on the subcategories?

6

Yes, you can add if you face still the same issue feel free to reach out to me at manshi@makkpress.com

7

Are you able to help me with the code on this discussion, please?

8

Please check with the below code:

details[open]>.site-nav__dropdown {
    max-height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
}
9

This made the dropdown height reduce with scroll, but I was hoping for the long column to be split into two side by side columns. Can this not be done?

10

Ok! Please try the below code.

@media (min-width:768px){
.site-nav__dropdown .medium-up--one-fifth {
    display: flex;
    flex-wrap: wrap;
    width: 33.333333%;
}
.site-nav__dropdown .grid.grid--center {
    display: flex;
    align-items: start;
    justify-content: center;
}
.site-nav__dropdown .medium-up--one-fifth .h5 {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
}
.site-nav__dropdown .medium-up--one-fifth div {
    width: 50%;
}
}
1 Like
11

You did it!!! A million thank yous!!!

12

Thanks for your appreciation!