How can I edit the main menu on Dawn to have two columns?

Store Design

Topic summary

Goal: Change the Dawn theme’s “Catalog” dropdown to show two columns (4 items each) and add a heading above the columns, matching the provided images (visuals are central to the request).

Proposed approach: Add CSS via Online Store > Theme > Edit code, in an asset named “theme.scss,” using:

  • #SiteNavLabel-solvents { width: auto; }
  • #SiteNavLabel-solvents ul { column-count: 2; }
  • #SiteNavLabel-solvents ul li { break-inside: avoid; }

Follow-up issues: The store reports there is no “theme.scss” asset and asks if “base.css” should be used instead. They also request guidance on how to insert a text heading above the two columns.

Current status: Unresolved. The two-column CSS approach is suggested but unconfirmed in Dawn’s file structure, and no method has been provided yet for adding the heading text. Awaiting further instructions or code for implementing the heading and confirming the correct stylesheet location in Dawn.

Summarized with AI on February 14. AI used: gpt-5.
1

Hello!

I want to edit main menu (header on image).

ariservice_0-1656389987419.png
ariservice_0-1656389987419.png230×427 12.5 KB

I have pop-up menu ‘‘Catalog’’ and I need to devide objects into 2 columns of 4 objects. I also want to add text above those columns like on image below .

Thank You!

ariservice_1-1656390187291.png
ariservice_1-1656390187291.png400×385 35 KB

2

@ariservice

  1. Go to Online Store > Theme > Edit code
  2. Asset > theme.scss > paste bellow code in bottom of file
#SiteNavLabel-solvents { width: auto; }
#SiteNavLabel-solvents ul { column-count: 2; }
#SiteNavLabel-solvents ul li {-webkit-column-break-inside: avoid;page-break-inside: avoid;    break-inside: avoid; }
3

Hello @DelightCart ! Thank You for your help

But i have no theme.scss asset. Maybe you mean base.css?

As I see it is for columns. Do you know how to add text above them?

4

Hello @DelightCart

Is there any solutions for my case?