How can I adjust column width for one-line text in a mega menu?

Topic summary

A user working with the Vantage theme needs to adjust column widths in their mega menu so text displays on a single line instead of wrapping. They’ve created a mega menu with images and two columns of links but cannot locate the width settings.

Proposed Solutions:

Multiple responders suggested CSS modifications:

  • Primary recommendation: Add CSS code to stylesheet.css or stylesheet.css.liquid targeting .menu-wrapper .inside-wrapper with width: auto !important

  • Alternative approaches: Modify queries.css with media query adjustments for grid layout, or insert custom CSS before the closing </body> tag in theme.liquid

Implementation Path:
All solutions follow similar steps: Navigate to Online Store β†’ Themes β†’ Edit Code β†’ locate the appropriate CSS file β†’ paste the provided code at the bottom.

The user shared their store preview URL to enable troubleshooting. The discussion remains technical, focused on CSS-based width adjustments for mega menu columns.

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

Hi! Maybe someone can help me regarding this?

I have created a mega menu with images, two columns of links, but can not find where to change the width of each column so the text fits in one line. Here is an example:

My current shop theme is VANTAGE.

Thanks in advance!

1 Like

Hi @LizelStudio ,

Could you please share your store URL, so that I can help you

Hey @LizelStudio

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

Could you share your store URL to check?

Sure, here it is:

https://kf2fctudxo9jmhyo-51456868517.shopifypreview.com/#

Thanks!

Hi @LizelStudio

Please add this CSS code at the bottom of your stylesheet.css or stylesheet.css.liquid file in your Online store > Theme > Edit code > Assets

#menu-wrapper .inside-wrapper { width: auto !important; }

Hi @Beae_Cass !

Here is the shop link:

https://kf2fctudxo9jmhyo-51456868517.shopifypreview.com/#

Hey @Moeed !

Thanks! Here is the link to the shop:

https://kf2fctudxo9jmhyo-51456868517.shopifypreview.com/#

Hi @LizelStudio ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store β†’ Theme β†’ Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Best regards,

Anthony

1 Like

Hello @LizelStudio

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->queries.css>Add this code at the bottom.

@media screen and (max-width: 767px){
#big-footer {
    display: flex;
}
.gridlock .row .desktop-12 {
    width: 100%;
}
}

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > stylesheet.css and paste this at the bottom of the file:
.inside-wrapper {
width: auto!important;
}