Centralise Mega Menu Option and Heading Size

[PaulClarke]

Hi,

I've tried a few solutions posted but none seem to work on my store. As you can see below the mega menu options open on the left hand side of the box. This looks wrong when the option selected is on the right of the menu, so in this case Gardening. How can I change the settings so the options are always centred rather than to the left.

Also, can you advise how I can increase the size of the menu options e.g. outdoor furniture, outdoor storage etc. They are a little small and I can't work out how to change this.

Thanks for your help!

[niraj_patel]

Hello @PaulClarke 
Can you share store URL?

[PaulClarke]

Hi,

My store is @ www.conchoutdoors.com.au<>. If there's anything else you need to help find the answer just let me know as I'm out of ideas!

Thanks for your help.

Paul
[http://www.conchoutdoors.com.au/cdn/shop/files/Color_logo_-_no_background_7c4948f6-0a93-4827-b806-d2...]<>
Conch Outdoors for Quality Outdoor Furniture, Storage and Accessories<>
Check out our range of high quality Outdoor Furniture, Outdoor Storage and Outdoor Accessories. We specialise in Outdoor Dining, Outdoor Lounge Sets, Sun Lounges, Garden Sheds and Outdoor Storage Boxes, along with a range of Beach, Camping, Picnic and Gardening products. Make every day an adventure with Conch Outdoors!
www.conchoutdoors.com.au

[HDL-Shin]

Hi @PaulClarke,

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css or styles.css

Step 3: Insert the below code at the bottom of the file -> Save

.mega-menu[open] .mega-menu__content {
    width: max-content !important;
    transform: translateX(-35px) !important;
}

.mega-menu[open] {
  position: relative !important;
}

Final Result: 

Hope it helps you

[PaulClarke]

Hi,

Thanks for the coding but it doesn't quite work. When I add this to base.css the menu's DO start in the right place e.g. under to header selected, but the dropdown is squashed so you can only have one letter per row (see screenshot below). Somehow needs the left margin to be fixed but open to the right as far as required rather than finishing at the right margin of the heading. Any suggestions how to fix this?

[Benjamen]

Hello Paul,
Your site looks really well thought out and your menus are very robust.
If you're open to an app solution, Meteor Mega Menu would allow you to showcase your storage and outdoor products in your mega menu with photos as well as short descriptions. Since you already have taken the time to take such great pictures, I'd suggest looking at the "Stardust" or "Horizon" both of which have the option to be centered when open.
If you need help customizing a look, our support is always ready to help guide you on your way.
I hope this helps, and good luck! 😊