How can I reduce the width of my mega menu?

Store Design
,

Topic summary

A user seeks to reduce their mega menu width and bring columns closer together, sharing a screenshot showing the menu spanning the full screen width.

Proposed Solutions:

  • Multiple support teams (PageFly-Kate and GemPages) suggest adding CSS code to the styles.css file via Theme → Edit code
  • Initial code suggestion didn’t work for the original poster
  • Revised solutions include:
    • Setting width to 50-75% with !important flags
    • Using left: 50% and transform: translate(-50%) to center the menu
    • Targeting the .mega-dropdown class

Open Issue:
Another user asks how to implement the solution if their theme lacks a styles.css file, which remains unanswered. The original poster hasn’t confirmed whether the revised CSS solutions resolved their issue.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

https://gha335ee8tuz5bcw-53265825967.shopifypreview.com

Would like to reduce to width of my mega menu. It doesn’t need to take up the entire screen. If possible I would also have the columns closer to each other

Thank you

Knipsel.JPG
Knipsel.JPG1107×286 23.1 KB

2

Hi @Bramm ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.css->paste below code at the bottom of the file:

.mega-dropdown {
left: auto !important
right: auto !important
with: 50% !important
}

Hope my answer will help you

1 Like
3

Thank you for the response, that code doesn’t seem to do anything

4

Hello @Bramm

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your styles.css file and paste the following code below:

.mega-dropdown{
  left: 50% !important;
  transform: translate(-50%) !important;
  width: 50% !important;
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

1 Like
5

Hi @Bramm ,

You can try again with the code below:

.mega-dropdown {
left: 50% !important
with: 75% !important
}
1 Like
6

How do I do this if I don’t have the “styles.css” file?