Horizon Mega Menu Width

Store Design
, ,

Topic summary

A user seeks to reduce the mega menu width on their Shopify store (loreandwhimsy.com) using the Horizon theme, as it currently spans the full page width.

Solution Provided:

  • Add custom CSS to base.css file targeting .mega-menu.section.section--full-width-margin.section--full-width
  • Set max-width: 1200px with centered margins to constrain the menu width

Follow-up:
The user asks about controlling height as well. The helper provides updated CSS including:

  • min-height: 200px and max-height: 400px for height constraints
  • overflow-y: auto to enable scrolling if content exceeds maximum height

The solution involves editing theme code directly through Shopify Admin. Screenshots were shared showing the current full-width mega menu layout. The issue appears resolved with the CSS customization approach.

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

Is there a way to adjust the width of the mega menu so it isn’t full page? I can’t seem to get it any smaller.

Screenshot 2025-10-04 102647
Screenshot 2025-10-04 1026471908×312 27.9 KB

Screenshot 2025-10-04 102715
Screenshot 2025-10-04 1027151919×541 49.3 KB

1 Like
2

Hi @Meredithdavey

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

3

Hi! URL is https://loreandwhimsy.com/

1 Like
4

Hi @Meredithdavey

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
.mega-menu.section.section--full-width-margin.section--full-width {
  max-width: 1200px;   
  margin: 0 auto;      
  width: 100%;    
}
1 Like
5

Awesome, thank you! If I wanted to do the height, I could just add that there as well, like if I wanted a min-height?

1 Like
6

Hi @Meredithdavey

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
.mega-menu.section.section--full-width-margin.section--full-width {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  min-height: 200px;   
  max-height: 400px;   
  overflow-y: auto;   
}

Kindly feel free to get back to me if you need any further assistance.
If helpful, please like and accept the solution. :white_check_mark: