Dawn 13, megamenu column size

Store Design
, ,
1

https://raindesignsboutique.com

does this have something to do with padding or margin size? thank you

this is what the megamenu looks like on my 15" laptop [email removed] 4k

R2D21_1-1713057671228.png
R2D21_1-1713057671228.png3160×857 108 KB

same laptop output to the 27" monitor [email removed] 4k, the column are spread-out way too far apart

R2D21_2-1713057697009.png
R2D21_2-1713057697009.png3345×575 51.3 KB

I would like to have it looking like this

R2D21_3-1713057831570.png
R2D21_3-1713057831570.png1456×536 26.6 KB

2

What there you are using?

Sorry, didn’t notice the word Dawn 13 :joy:

3

Anyways, On your Theme Settings, find the option of “Custom CSS”, then add this code:

.mega-menu__list {
  max-width: none;
}

Let me know how things worked.

4

thank you for the reply, i’m testing this out on a draft theme since my store is now live…but that change didn’t seem to change anything

5

You sure you added the code?

Try adding this code to your Header Section Custom CSS.

On your Theme Editor, Click on the Header Section, then to the right find Custom CSS and add the code.

Let me know if it worked.

6

yes i did try that and also in base.css, no effect

thank you

7

Make sure to remove the important from that CSS rule.

.mega-menu__list {
    max-width: calc(100% - 32rem) !important;
}
8

thank you for the feed back

.mega-menu__list {
    max-width: calc(100% - 32rem) !important;
}

was added to change the alignment of the mega menu to be like this:

R2D21_1-1713289044134.png
R2D21_1-1713289044134.png1177×650 89.4 KB

if i change it to

.mega-menu__list {
  max-width: none;
}

then it looks like this, still no change in column width but the menu is now aligned to the logo

R2D21_0-1713288686645.png
R2D21_0-1713288686645.png1620×667 99.3 KB

9

Try changing the width and gap properties for the

.mega-menu__list

on your added CSS code.

10

thank again, i’m pretty close to achieving what i want

added this to the custom css for the header section

.mega-menu__list {
  padding-left: 0;
  margin-left: 210px;
}

only thing is I would like do is to limit the mega menu of the collections section to just 3 columns and 3 rows, would that be possible?