Split Dropdown Menu into Columns - Colorblock Theme

Technical Q&A

Topic summary

A user is attempting to reorganize their Shopify store’s navigation menu by splitting a lengthy ‘Shop by Genus’ dropdown (under the ‘Plants’ parent menu) into multiple columns. The current single-column layout requires excessive scrolling, creating a poor user experience.

Proposed Solution:

Another user provided a two-part technical fix:

  • JavaScript modification: Add custom JS code to the theme.liquid file (positioned after the </body> tag)
  • CSS styling: Insert specific CSS rules into the base.css file to create a four-column layout with defined width (700px) and column count properties

The solution includes code snippets for both modifications, though the exact code content appears corrupted or improperly formatted in the conversation. The approach aims to transform the dropdown into a multi-column grid for improved navigation and reduced scrolling.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I am currently trying to split the ‘Shop by Genus’ sub-menu under the ‘Plants’ parent-menu into multiple columns. Right now it is an extensive list the requires an infinite scroll for the end-user and I want it to be more end user friendly.

Site: http://sproutandsageplants.com/

2

Hello @sproutsageplant ,

  1. Add this JS in theme.liquid just after the
  1. Open your base.css file and paste the following code below:
.four-columns{ 
    width: 700px !important; 
}
.four-columns ul{ 
column-count: 4;
}

Thanks