Centralise Mega Menu Option and Heading Size

PaulClarke
New Member
4 0 0

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.

 

PaulClarke_0-1715312921112.png

Thanks for your help!

Replies 5 (5)

techlyser_web
Shopify Partner
1537 284 305

Hello @PaulClarke 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
PaulClarke
New Member
4 0 0
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
Shopify Partner
80 20 15

Hi @PaulClarke,

You can try this code by following these steps:

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

HDLShin_6-1715315537811.png

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

HDLShin_7-1715315557265.png

 

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: 

HDLShin_8-1715315697431.png

 

Hope it helps you

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️
PaulClarke
New Member
4 0 0

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?

 

PaulClarke_0-1715552249645.png

 

Benjamen
Shopify Partner
54 4 7

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

Benjamen @ Helium
- Customer Fields ✪✪✪✪✪ (300+ reviews)
- Meteor Mega Menu ✪✪✪✪✪ (200+ reviews)