Can you customize the mega menu in Dawn theme?

Store Design
, , ,

Topic summary

A user asks whether a specific mega menu design (shown in an attached image) can be implemented in Shopify’s Dawn theme.

Proposed Solution:

  • Edit the header.liquid file in the Sections folder to add multiple columns within the mega menu <div>
  • Style the menu by adding CSS code to the base.css file in the Assets folder
  • The CSS uses flexbox (display: flex) to create column layouts

Code Structure:

  • HTML markup includes column headings and submenu items organized in lists
  • CSS targets .mega-menu and .column classes for styling

Status: The original poster acknowledges the guidance and plans to try the suggested approach. The discussion remains open with no confirmed implementation results yet.

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

Hi there,
I would like to know if this mega menu design is doable in shopify dawn theme?

alicanteallan7_0-1689293128408.png
alicanteallan7_0-1689293128408.png873×299 27.3 KB

I tried looking and using Mega Menu Third Party Apps but no luck.

2

Hello @alicanteallan7 ,

Here’s a general guide for you to follow:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → header.liquid file

Within the mega menu

, you can add multiple columns like this:


  

    ### Column 1
    
      - Submenu Item 1

      - Submenu Item 2
    

  

  
    ### Column 2
    
      - Submenu Item 3

      - Submenu Item 4

Go to Assets folder → base.css file → add this following code to style your menu

.mega-menu {
  display: flex;
}

.column {
  flex: 1;
}

Save and preview

Hope this can help.

Transcy

1 Like
3

I will try this one, thanks for the heads up.

2 Likes