Does anyone know how to extend the width of the mega menu for the Impact 4.4.0 theme? I want it to extend out to the shopping cart, instead of where it cuts off now. (See image)
On the image, you can see where it cuts off now. This is what I would like to change, so that it instead cuts off below the shopping cart and overrules the “featured product” section, which we don’t use.
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:
Identify the mega menu container class using your browser’s developer tools (usually something like .mega-menu__content or .header__menu-item).
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.