Ritual Theme, How can I change this formatting?

Technical Q&A
1

I want to make these sections look better and my first thought is to change the formatting so that the longer menu sub-items do not format to center and stack on top of themselves. How can I change this so that they will format left without a border limit in desktop view only? The mobile still benefits from the center format stacking. The url is autobongs.com

Screenshot (462)
Screenshot (462)1920×1200 272 KB

Screenshot (463)
Screenshot (463)1920×1200 299 KB

If yall have any ideas that would be even better for this I am all ears.

2

Try something like:

.mega-menu__grid:not(:has(li:nth-child(7))) {
  --menu-columns-desktop: 3;
  --menu-columns-tablet: 2;
}

.mega-menu__link:not(:has(img)) span{
 text-align: left !important;
}

Basically, the rule says – if megamenu has less than 8 items, show it in 3 columns.

Plus another rule – if menu item has no image, align it’s text to the left.

May be wrap with media query if for desktop only:

@media (min-width:750px) {
  .mega-menu__grid:not(:has(li:nth-child(7))) {
    --menu-columns-desktop: 3;
    --menu-columns-tablet: 2;
  }

  .mega-menu__link:not(:has(img)) span{
   text-align: left !important;
  }
}
4

This definitely helps thanks again for your great advice.