Solved

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

AhmerAli
Shopify Partner
9 0 0

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/

Menu.png

 

Thank you 

S Ahmer Ali
Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
2088 598 467

This is an 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.

ThePrimeWeb_0-1706172487898.png

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"

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ProtoMan44
Shopify Partner
146 13 23

This is an 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>




- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
2088 598 467

This is an 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.

ThePrimeWeb_0-1706172487898.png

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"

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
AhmerAli
Shopify Partner
9 0 0

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

S Ahmer Ali

ProtoMan44
Shopify Partner
146 13 23

This is an 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>




- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
AhmerAli
Shopify Partner
9 0 0

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

S Ahmer Ali