How can I get one more column in my mega menu?

Store Design
,

Topic summary

A user wants to display 7 fragrance categories in a single row within their mega menu, but the Dawn theme currently limits them to 6 columns.

Proposed Solutions:

  • One responder suggests redesigning the navigation structure entirely, recommending a 3-level vertical layout instead of cramming more items horizontally, citing better user experience.

  • Another provides a CSS code solution to extend the grid to 7 columns by adding custom code to the theme’s CSS file:

div#MegaMenu-Content-2 .mega-menu__list {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

The CSS approach appears to successfully add the 7th column based on a provided screenshot. The discussion remains open regarding which approach the original poster will implement.

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

I want all my fragrance categories in one row but it seems like the mega menu only allows 6 across at a time. Is there a way to add a 7th item on the row? I’m using the Dawn theme.

Screenshot 2025-01-27 at 10.51.55 AM.png
Screenshot 2025-01-27 at 10.51.55 AM.png1363×411 48.7 KB

2 Likes
2

Hey @khalldesign

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

This is my temporary URL right now: https://b0aa50-78.myshopify.com/

4

Hi @khalldesign Customer would be much better off if you redo the nav so it’s built from the start to have that much noise.

Don’t cram more than handful of navs into a horizontal menu like that it just creates user annoyances.

To ignore reason and cram in more you’d need to shrink the spacing / font-sizes of all the columns using CSS

Really you need a menu with 3 level vertical layout in the menu with the fragrances going top to bottom and eachs ones items to the right.

5

Hi @khalldesign

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#MegaMenu-Content-2 .mega-menu__list {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like