Mega Menu - submenu

Solved

Mega Menu - submenu

Voldiep
Excursionist
18 1 3

Hello, 

Refresh theme user here. 

Can you advise how can I align 2 bottom submenu's to the left, rather than in the center? Looks ugly like this. 

Thank you 

Voldiep_0-1718829295168.png

 

Accepted Solution (1)
Voldiep
Excursionist
18 1 3

This is an accepted solution.

Hi @Kyle_Poieo-Dev  2nd solution didn't work. 

1st did work, but rather deleting, changed to left: 
.header--top-center .mega-menu__list {
display: flex;
justify-content: left;
flex-wrap: wrap;
column-gap: 0;
}

View solution in original post

Replies 7 (7)

Kyle_Poieo-Dev
Shopify Partner
43 4 8

Give us the URL.. It appears to be a flexbox with justify-content: "center" and you'd want it to be justify-content: "flex-start". Tough to say without the URL handy! 🙂

-

Need a Shopify developer? Send me an Email


- CEO & Lead Developer at Poieo Dev
- Shopify Design Changes | Shopify Custom Coding | Custom Modifications | SEO | E-Commerce Management
Poieo Dev
Voldiep
Excursionist
18 1 3

Hi @Kyle_Poieo-Dev thank you for prompt reply: https://www.firstgearup.co.uk/

Kyle_Poieo-Dev
Shopify Partner
43 4 8

Hi @Voldiep 

Check this one. 

Is changing theme code something you're comfortable with? Looks llike your .header--top-center .mega-menu__list {} has justify-content: 'center'. If you remove that from your css it will fix the issue.

Screenshot 2024-06-19 at 1.53.04 PM.png

Or a less elegant approach would be to,

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.

<style>
.header--top-center .mega-menu__list {
justify-content: none
}
</style>
-

Need a Shopify developer? Send me an Email


- CEO & Lead Developer at Poieo Dev
- Shopify Design Changes | Shopify Custom Coding | Custom Modifications | SEO | E-Commerce Management
Poieo Dev
Voldiep
Excursionist
18 1 3

This is an accepted solution.

Hi @Kyle_Poieo-Dev  2nd solution didn't work. 

1st did work, but rather deleting, changed to left: 
.header--top-center .mega-menu__list {
display: flex;
justify-content: left;
flex-wrap: wrap;
column-gap: 0;
}

PageFly-Noah
Shopify Partner
1317 233 268

This is Noah from PageFly - Shopify Page Builder App

Hi @Voldiep  I can help you. Please can you provide the password website url. Thank you.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Voldiep
Excursionist
18 1 3

Hi @PageFly-Noah  , all sorted. Thank you. 

PageFly-Noah
Shopify Partner
1317 233 268

Oh , Looks like you have fixed this issue already. Have a good day.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.