Mega menu needs to be 3 columns, and in alphabetical order

Store Design
, ,
1

I’m using dawn theme, and have managed to get the mega menu items across 6 columns but I’d rather they were across 3 columns (smaller width, with white space left and right), and in alphabetical vertical order going down on first column, and so on (not horizontally). Unable to share the website link publicly as it is still in development.

Screen Shot 2024-04-26 at 4.42.16 PM.png
Screen Shot 2024-04-26 at 4.42.16 PM.png2456×628 143 KB

2

Hi @sammykennedy202

How are you?

Can you please share store URL?

3

https://www.craftco.co.nz/

nocturnal2024

1 Like
4

Hi @sammykennedy202

You can follow the following steps:

  1. Please remove the width from the html.
  2. Please go to the Online Store.
  3. Then Edit Code.
  4. Please find the theme.liquid file.
  5. Please add code before closing the tag tag.

laddisahsi_0-1714110565730.png
laddisahsi_0-1714110565730.png1439×447 68.5 KB

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

5

I think something has gone wrong, is this right?

@media only screen and (min-width: 750px){ .mega-menu__list{ .mega-menu__list li { display: inline-block; } .header--top-center .mega-menu__list>li { width: 33% !important; }
6

Hi @sammykennedy202

Please remove the marked style tag in red.

Add my given css before media query like this

laddisahsi_0-1714112742576.png
laddisahsi_0-1714112742576.png752×520 22.1 KB

7

Thank you, it’s in alphabetical order but not in 3 columns. Is there a way to fix that?

8

I managed to go back to another post and updated this and now it’s working but not alphabetical order vertically but it’ll do. At least it’s across 3 columns now.

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 

<style>
@media only screen and (min-width: 750px){
.mega-menu__list{
     width: 80rem !important;
}
.mega-menu__list li {
   width: calc(100%/3);
   display: inline-block;
}
}
</style>
9

Hey,

I’ve tried this bit of code for my website and it works on the first menu but not the second. Is there a way to fix this?.

Thanks

10

Thank you for this code. It worked perfectly to create three columns on Dawn Mega Menu.

Is there a way to make the menu items appear in the equivalent of column 2 (near the centre) rather than in column 1 (on far left) for any menus that don’t have submenus? Some of my menus have 2-3 submenus (which now look good) and some only have a list (which looks strange way over on the left in column 1). Your help would be greatly appreciated.