Column Spacing Mega Menu Dawn Theme

[Molly_T]

Having an issue getting all my columns to be equally spaced on my mega menu using the dawn theme.

Website: https://www.mollyisabeljewellery.co.uk

Any help would be much appreciated!

[Moeed]

Hey @Molly_T

You can either add this code in the custom CSS option of the header.

div#MegaMenu-Content-1 ul.mega-menu__list.page-width {
    display: flex !important;
    justify-content: space-around !important;
}

OR

---

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
div#MegaMenu-Content-1 ul.mega-menu__list.page-width {
    display: flex !important;
    justify-content: space-around !important;
}
</style>

RESULT:

---

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

[tim_tairli]

I would go to Edit Theme, click the “Header” section and paste the following code into “Custom CSS” setting:

ul.mega-menu__list {
  grid-template-columns: repeat(auto-fit, minmax(0,1fr));
}

This should make all columns the same width and grow them to fill entire available space.

Before/After:

May still look not 100% uniform because of unequal text lengths though…

[Ploqo]

Problem:

Solution:
Following Tested on Dawn theme, and on your site from my browser. It works:

Result: If you got two columns, three columns, or even four, all will be centred:

In Theme editor, click the Header section, then Custom CSS at the bottom right corner

Then paste:

.mega-menu__list {
  grid-template-columns: repeat(auto-fit, minmax(0, 22rem));
  justify-content: center;
}

22rem: adjust it to your taste.

[devcoders]

Hi @Molly_T

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

.mega-menu__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: start;
}

.mega-menu__list > li {
  min-width: 0;
}

[Molly_T]

Thank you so much! This has worked perfectly, however how can i change it so there is less space between the columns? I would rather they were closer together and not across the whole page. Thank you for your help!

[Moeed]

I have updated my above code and the result screenshot as well. Remove the previous code and add the updated code again.

If you would like to reduce more space between the columns then change the word space-around to space-evenly

Hope that helps.

Cheers,
Moeed

[Molly_T]

Unfortunately the columns aren’t any closer together?

[Moeed]

This is how it was before:

This is the result of space-evenly so the column have gotten closer yes.

Best,
Moeed

[NKCreativeSoulutions]

G’day @Molly_T,

Maybe it would be worthwhile taking a screenshot and then editing it to move the columns as you’d ideally like them. The problem can be that with coding you’ll lose the responsiveness and what looks perfect on your screen might not then be the same for every other screen which isn’t the same size.

The options offered by @Moeed and @tim_tairli are both responsive codes, they change automatically to best suit the amount of space on a screen.

Nathan