Design menu neatly

[Sheeks]

I need help with the menu. As u see, the sub for categories is displayed in 4,4,2. can u help me to reposition it to 5,5 instead. is it possible?

[Sheeks · Accepted solution]

see! it works!
can i ask another question🙏
as u see the left hand menu has no gap while the right have gap
can u help me center it for better looking menu

[Moeed]

Hey @Sheeks 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Sheeks]

https://sheeksorority.com/
no pswd

[Moeed]

Hey @Sheeks 

Maybe you shared the link of live theme, send the preview url of draft theme 

[Sheeks]

owh thats bcoz i got some problem with hmm lets say market. so some part o the world might not get access like that. the one i provided is international like eu n us. ill copy everthing on default page but lets it be later.
so to helpu, i would suggest u to change the currency icon to usd. it didnt make sense but it works for me

[Moeed]

Hey @Sheeks 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
ul.nav-megamenu-columns {
    grid-template-columns: repeat(var(--megamenu-column, 5), minmax(0, 1fr)) !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Sheeks · Accepted solution]

see! it works!
can i ask another question🙏
as u see the left hand menu has no gap while the right have gap
can u help me center it for better looking menu

[BSSCommerce-B2B]

Hi @Sheeks , 

It's me again. I still at the community Shopify design and I see your thread again. ^^

You can solved this issue by edit css in header.css, line 279: 

In this step, you can change "grid-template-columns" from 4 to 5.

And the result will be as you want! 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day! ^^

[Sheeks]

hi there!
i am sorry to keep bothering u from one question to another but i feel great bcoz u r optimistic person!
so haha i check thrice actually, did i copy the code wrongly?

[BSSCommerce-B2B]

Hi  @Sheeks , 

Sorry for my delay, it's evening in my country right now and I just had dinner with my family. 

About your issue, as my image I share at previous reply, I can see problem in line 279 at header.css.

You can  try edit on this.

If it not work, you can edit directly css in base.css as other topic I helped you.

Like below:

ul.nav-megamenu-columns {
    grid-template-columns: repeat(var(--megamenu-column, 5), minmax(0, 1fr)) !important;
}

We hope my suggestions will fully meet your requirements this time.

If it is helpful, can you kindly give us many likes and mark the solution for us? 

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Thanks in advance.

[Sheeks]

Hi
Sorry I took too long to reply
I also was resting 
but then my internet not working
then i did add your code but i am not sure if its making changes or my internet bad hahahah
so i just use the code that the other person gave n its work
i did add yours too
both working well!

can i ask u another question thou🙏
i want to make the menu center
for now the left menu is too close to the left with no gap while the right menu have gap
it would be nice if we can center the menu having the same gap both side so it look nice
can🙏

[BSSCommerce-B2B · Accepted solution]

Hi @Sheeks , 

Absolutely can center the menu having the same gap both side. 

You can edit css in base.css, below: 

.nav-submenu.nav-megamenu-container li a {
    text-align: center !important;
}

And the result will be: 

We're happy to see that our suggestion helped you solve the issue as same as the other person gave and
both working well!

I'm still finding solution for your question on other topics/ thread in Shopify community ^^

Can you kindly mark solution for my answers in different issues in this thread, if it helps. 

This can greatly motivate us to contribute to our community.

Thanks in advance! ^^ 

[Sheeks]

Thank u so much! It looks very neat now!