Alchemy Theme: Help with Mega Menu image height

Store Design
, ,
1

Can someone please help me control the height on the megamenu featured image? I need to limit the height or dynamic resize to where it shows the full image.

Screenshot 2026-03-24 191537
Screenshot 2026-03-24 191537717Ă—680 65 KB

2 Likes
3

Dear @elitesimgolf

Could you please share your store link? After that, I will check and support you in updating and adjusting the menu height.

Regards,
Eric from Shopplaza

4
6

Dear @elitesimgolf

Please follow these instructions:
1, Go to Online Store > Themes.
2, Click the three dots (…) => Edit code
3, In the sidebar on the left, scroll down to the Assets folder. Look for a file named “main.css”
4, Click the file to open it in the code editor on the right.
5, Scroll to the end of the file => Add a comment to label your changes => Paste bellow CSS

/* Custom Menu Styling */
div#mega-menu-tier-2 {
    max-height: max-content !important;
}

6, Click the Save button in the top right corner and check your store.

image
image1920Ă—973 216 KB

Regards,
Eric from Shopplaza

1 Like
7

I’d rather suggest this code in “Header” section “Custom CSS” setting:

li.nav-ctas__cta {
  max-width: 300px;
}

Or this:

.nav-columns li:has(img) {
  max-width: 300px;
}

This will prevent these columns from growing too wide (and, therefore, too high).

Currently, these columns grow more than columns with menu only.

8

Hi @elitesimgolf

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

.nav-ctas__cta .media {
  padding-top: 0 !important;
  max-height: 250px;
  text-align:center;
}

.nav-ctas__cta img {
  object-fit: contain;
}

Best regards,
Devcoder :laptop:

9

@elitesimgolf

Pleae add the following css to your assets/theme.css or main.css bottom of the file.

.nav-ctas__cta img {
  max-height: 220px;
  width: 100%;
  object-fit: contain;
}

div#mega-menu-tier-2 {
  max-height: max-content !important;
}

Thanks!

10

Hello @elitesimgolf,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before 

<style>
.nav-ctas__cta .media {
    padding-top: 0 !important;
    height: 300px !important;
    aspect-ratio: auto !important;
}

.nav-ctas__cta .media img {
    object-fit: contain !important;
    height: 100% !important;
    width: auto !important;
    position: relative !important;
}
</style>

image
image1366Ă—672 202 KB

11

The best way to control the height of image in the mega menu, is via the help of max-height.

Yes, with the help of max-height the height of the image can easily control.

Here is the css shared below.

.media.absolute.top-0.left-0.w-full.h-full img {
 max-height: 200px !important;
}