Solved

Splitting Long Menu Columns into 2 (Impulse Theme)

aliciavterrible
Excursionist
14 1 3

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

Accepted Solution (1)
Ishan_Makkar
Shopify Expert
115 7 8

This is an 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%;
}
}



Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us

View solution in original post

Replies 11 (11)

Ishan_Makkar
Shopify Expert
115 7 8

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.

 

Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us
aliciavterrible
Excursionist
14 1 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.

Ishan_Makkar
Shopify Expert
115 7 8

So we need to check the code.

Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us
aliciavterrible
Excursionist
14 1 3

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
Shopify Expert
115 7 8

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

Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us
aliciavterrible
Excursionist
14 1 3

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

 

Ishan_Makkar
Shopify Expert
115 7 8

Please check with the below code:

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

 

Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us
aliciavterrible
Excursionist
14 1 3

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
Shopify Expert
115 7 8

This is an 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%;
}
}



Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us
aliciavterrible
Excursionist
14 1 3

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

Ishan_Makkar
Shopify Expert
115 7 8

Thanks for your appreciation!

Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us