Splitting Long Menu Columns into 2 (Impulse Theme)

[aliciavterrible]

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

[Ishan_Makkar]

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.

[aliciavterrible]

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.

[Ishan_Makkar]

So we need to check the code.

[aliciavterrible]

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?

[Ishan_Makkar]

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

[aliciavterrible]

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

[Ishan_Makkar]

Please check with the below code:

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

[aliciavterrible]

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?

[Ishan_Makkar · Accepted solution]

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%;
}
}

[aliciavterrible]

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

[Ishan_Makkar]

Thanks for your appreciation!