Change the formation of dropdown menu

Topic summary

A user seeks help converting their single-column dropdown menu into a multi-column layout for the “Brands” section on their Shopify store. Currently, all brand options stack vertically in one column, making many items invisible without scrolling.

Desired outcome: A four-column dropdown menu similar to the reference site (swelluk.com), which displays more options simultaneously.

Proposed solution: Another user suggests modifying the theme’s CSS to create a multi-column layout and potentially editing the navigation Liquid code if CSS alone doesn’t achieve the desired result.

Current status: The discussion remains open. The original poster has requested specific details about where to add the CSS code and what exact CSS should be used. No concrete code snippets or step-by-step instructions have been provided yet.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

Hi! Can somebody help me how to change the layout of the dropdown menu for my site https://aquaticliving.co.uk/

Currently, the dropdown for “Brands” is in one column only, so I can’t see all the brands below because they are all stacked in a single column. You can see the attached image to see what I’m referring to.

I want it to be like the dropdown of https://www.swelluk.com/ where they have four columns on it. Sample on the picture below

Hi @aquatic_living1

You can achieve a multi-column dropdown menu in your Shopify store (https://aquaticliving.co.uk/) similar to Swell UK by modifying your theme’s navigation menu layout.

Steps to Create a Multi-Column Dropdown Menu in Shopify
1)Add CSS for Multi-Column Layout
This will create a 4-column dropdown menu instead of a long vertical list.

  1. Edit Your Navigation Liquid Code (If Needed)
    If the above CSS doesn’t work as expected, you may need to update your theme’s navigation layout.

Save & Refresh your store to see the effect.

Let me know if this works.

where should i add the css and what css should I add too?