How can I reduce the size of my mega menu?

Store Design
, , ,

Topic summary

A user seeks help reducing the width of their mega menu, providing a screenshot as reference.

Solution provided:

  • Navigate to Online Store → Theme → Edit code
  • Locate the base.css file
  • Add custom CSS at the bottom of the file:
    ul.mega-menu__list.page-width {
  max-width: 170rem !important;
  margin-left: 200px !important;
}
  • Save the changes

The CSS code limits the mega menu’s maximum width to 170rem and adds a 200px left margin. The responder from PageFly app suggests this should resolve the sizing issue.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello! Can you tell me how to reduce the mega-menu as in the screenshot

site: salebk.com

screen.png
screen.png4200×2815 151 KB

2

Hi @AntonysaleBK

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

ul.mega-menu__list.page-width {

margin-left: 200px !important;

max-width: 170rem !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly