Design menu neatly

Solved

Design menu neatly

Sheeks
Excursionist
70 1 6

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_0-1719746846356.png

 

Accepted Solutions (2)
Sheeks
Excursionist
70 1 6

This is an accepted solution.

Sheeks_0-1719750681648.png

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

View solution in original post

BSSCommerce-B2B
Shopify Expert
551 110 132

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

BSSCommerceB2B_0-1719761881176.png

 

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! ^^ 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 12 (12)

Moeed
Shopify Partner
4304 1105 1353

Hey @Sheeks 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Sheeks
Excursionist
70 1 6
Moeed
Shopify Partner
4304 1105 1353

Hey @Sheeks 

 

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

Moeed_0-1719747750602.png

 

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Sheeks
Excursionist
70 1 6

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
Shopify Partner
4304 1105 1353

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:

Moeed_0-1719749597610.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Sheeks
Excursionist
70 1 6

This is an accepted solution.

Sheeks_0-1719750681648.png

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
Shopify Expert
551 110 132

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: 

BSSCommerceB2B_0-1719748808986.png

 

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! ^^

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Sheeks
Excursionist
70 1 6

Sheeks_0-1719750314126.png

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
Shopify Expert
551 110 132

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.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Sheeks
Excursionist
70 1 6

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
Shopify Expert
551 110 132

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

BSSCommerceB2B_0-1719761881176.png

 

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! ^^ 

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Sheeks
Excursionist
70 1 6

Thank u so much! It looks very neat now!