How can I fix the megamenu to have 5 columns per row?

[dreamtechzone_5]

Hello Everyone!

I am trying to create a mega menu but when I have various columns (more than 8 or 10) I want each heading to move into a second row, rather than having to scroll across. I want to have 5 columns per row. Please help me. Thank you.

Store: https://urbanglowingstore.myshopify.com/

Password: Admin

What I want.

[CodingFifty · Accepted solution]

Hi @dreamtechzone_5,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file. 

@media (min-width: 769px){
.mega-menu__column {
    flex: 0 auto;
    margin: 21px 75px 0px 0px !important;
    display: block !important;
    flex: 1 1 calc(12% - 20px) !important;
    box-sizing: border-box;
}

.mega-menu__inner {
  display: flex;
  flex-wrap: wrap; /* Allows columns to wrap to the next row */
  gap: 20px !important; /* Adds spacing between columns */
  width: 100%;
}
}

[dreamtechzone_5]

Great. Thank you very much. It worked.

Can it be kept like this?

[CodingFifty]

Please mark the solution. @dreamtechzone_5 

[dreamtechzone_5]

Done. Thank you. Can it be kept like this?