Mega Menu Desktop: Need Help with Spacing Columns

Store Design
, , , , , , , , , ,

Topic summary

A user is experiencing uneven spacing between columns in their mega menu on a Shopify store. The columns appear too far apart and inconsistently spaced.

Proposed Solution:

  • Use browser Developer Tools to identify the CSS classes/IDs for the mega menu columns
  • Apply custom CSS to adjust column spacing:
    • Set consistent margin-right values between columns
    • Remove margin from the last column using :last-child
    • Use flexbox (display: flex and justify-content: space-between) for equal distribution
  • Add the CSS through the theme customizer or custom CSS section

Status: The issue remains open; the user has not yet confirmed whether the suggested CSS solution resolved the spacing problem.

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

Hi,

my mega menu the columns don’t seem to be spaced correctly. I’d like them to be closer together and same distant from each other. my site is https://vazluxe.com/

spacing.png
spacing.png2100×751 269 KB

2

Hi @Luxurymrkt
To adjust the spacing between the columns in your mega menu, you can tweak the CSS to ensure they are closer together and evenly spaced. Here’s a simple approach to modify the layout:

Inspect the current CSS: Use your browser’s Developer Tools to identify the classes or IDs applied to the mega menu columns.

Adjust the spacing: Add the following CSS code to reduce the space and maintain equal spacing between the columns:

/* Adjust mega menu column spacing */
.mega-menu .column {
    margin-right: 10px; /* Adjust the value to your preference */
}

/* Remove the last column's right margin */
.mega-menu .column:last-child {
    margin-right: 0;
}

/* Ensure equal spacing between columns */
.mega-menu {
    display: flex;
    justify-content: space-between;
}

Apply to your site: Once you’ve identified the correct classes, add this code to your site’s custom CSS or through your theme customizer.