How can I divide my navigation menu into 4 columns on Kalles theme?

[AhmerAli]

Hi Shopify Community 

I need to split the menu into the 4 columns I am using the Kalles theme, below is screenshot and URL for reference

https://mtfestore.com/

Thank you 

[ThePrimeWeb · Accepted solution]

Hey @AhmerAli,

Please paste this CSS into the Theme Customizer -> Settings -> Custom CSS

.t4s-lazy_menu[data-handle="collections"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

You will find it here.

If this doesn't work please go to you Theme's "Edit Code" option and paste this on top of the file named "base.css", "styles.css" or "theme.css"

[ThePrimeWeb · Accepted solution]

Hey @AhmerAli,

Please paste this CSS into the Theme Customizer -> Settings -> Custom CSS

.t4s-lazy_menu[data-handle="collections"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

You will find it here.

If this doesn't work please go to you Theme's "Edit Code" option and paste this on top of the file named "base.css", "styles.css" or "theme.css"

[AhmerAli]

Thanks The Prime Web, it worked when it worked when I pasted it in base.CSS

[ProtoMan44 · Accepted solution]

@AhmerAli  put this code under the base.css 

     #t4s-nav-ul>li:nth-child(3) .t4s-sub-menu {
            left: 0;
            right: 0;
        }

        #t4s-nav-ul>li:nth-child(3) .t4s-sub-menu>.t4s-lazy_menu>div[bis_skin_checked="1"] {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
        }

        #t4s-nav-ul>li:nth-child(3) .t4s-sub-menu>.t4s-lazy_menu>div[bis_skin_checked="1"]>div {
            min-width: 25%;
        }

if your issue is solved hit like and mark it as solution>

[AhmerAli]

Thanks man it worked, now the menu is as per my requirement.