Editing mega menu width

Store Design
, , , , , , ,
2

Hello @Sadea

Yes, you can adjust the width of the mega menu in the Impact 4.4.0 theme by modifying the relevant CSS. Here’s a general approach:

  1. Identify the mega menu container class using your browser’s developer tools (usually something like .mega-menu__content or .header__menu-item).

  2. Override the max-width or width property and adjust the positioning if necessary.

For example, try adding this to your theme’s custom CSS (under “Theme Settings” > “Custom CSS” or in your theme.scss.liquid / base.css file):

.mega-menu__content {
  max-width: 100vw !important; /* Or a specific value like 1600px */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

If the menu is still restricted due to container limitations, you may also need to override the parent container’s width or margins. You might also hide or position the “featured product” block to prevent it from affecting layout:

.mega-menu__product {
  display: none;
}

Important: Always preview on both desktop and mobile, and consider wrapping these changes in media queries for responsiveness.

Let me know if you have any issues!