Editing mega menu width

Hello everyone,

My website is: www.sadea.dk

My theme is: Impact 4.4.0

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.

Thank you very much.

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!

Hi @MandasaTech

I pasted the code it into the theme.css, however it is still restricted and cuts of near the middle of the mega menu. :slightly_smiling_face:

Any suggestions?

Thank you :slightly_smiling_face:

Can you share any kind of Screenshot with us?

@MandasaTech

Attached is the code pasted into the website code.

Also, this is how it looks on the website.

Note

I am editing on a copy of the theme, so the actual code will not be visible on the current active theme.