Re: Design menu neatly

Solved

Design menu neatly

Sheeks
Pathfinder
109 1 16

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
Pathfinder
109 1 16

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 Partner
1967 564 566

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

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 12 (12)

Moeed
Shopify Partner
5927 1607 1914

Hey @Sheeks 

 

Share your Store URL and Password if enabled.

 

Best Regards,

Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Sheeks
Pathfinder
109 1 16
Moeed
Shopify Partner
5927 1607 1914

Hey @Sheeks 

 

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

Moeed_0-1719747750602.png

 

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Sheeks
Pathfinder
109 1 16

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
5927 1607 1914

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

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Sheeks
Pathfinder
109 1 16

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 Partner
1967 564 566

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

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Sheeks
Pathfinder
109 1 16

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 Partner
1967 564 566

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.

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Sheeks
Pathfinder
109 1 16

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 Partner
1967 564 566

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

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Sheeks
Pathfinder
109 1 16

Thank u so much! It looks very neat now!