Dawn 13, megamenu column size

R2D21
Tourist
22 0 0

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 @ 4k

 

R2D21_1-1713057671228.png

 

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

 

R2D21_2-1713057697009.png

I would like to have it looking like this

 

R2D21_3-1713057831570.png

 

Replies 9 (9)

Columbus_Themes
Shopify Partner
116 8 15

What there you are using?

Sorry, didn't notice the word Dawn 13 😂

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!

Columbus_Themes
Shopify Partner
116 8 15

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.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
R2D21
Tourist
22 0 0

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

Columbus_Themes
Shopify Partner
116 8 15

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.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
R2D21
Tourist
22 0 0

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

thank you

Columbus_Themes
Shopify Partner
116 8 15

Make sure to remove the important from that CSS rule.

.mega-menu__list {
max-width: calc(100% - 32rem) !important;
}
If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
R2D21
Tourist
22 0 0

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

 

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

 

Columbus_Themes
Shopify Partner
116 8 15

Try changing the width and gap properties for the 

.mega-menu__list

on your added CSS code.

If you find my reply helpful, please hit Like and Mark as Solution.

Happy coding!
R2D21
Tourist
22 0 0

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?