Add image to mega menu items

chocolatte1234
Explorer
57 0 21

Screen Shot 2023-02-02 at 3.55.17 PM.png

Is it possible to add image on top of each mega menu items? Shop: https://6fa09b.myshopify.com/ Theme: Dawn

 

Thanks!

Replies 12 (12)

Litos
Globetrotter
688 169 143

Hi @chocolatte1234,

You want to add 4 images here? Or just 1 image and full?

Screenshot.png

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
chocolatte1234
Explorer
57 0 21

4 images! like the red line you drew

Litos
Globetrotter
688 169 143

Hi @chocolatte1234,

Please follow the steps below:

- Step 1: Upload 4 images at Content > Files.

For example the names of the images are: image-1.png, image-2.png, image-3.png, image-4.png

- Step 2: Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

#MegaMenu-Content-3 li:before {
    content: '';
    width: 100%;
    height: 90px;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
}
#MegaMenu-Content-3 li:nth-child(1):before {
    background-image: url(link image 1);
}
#MegaMenu-Content-3 li:nth-child(2):before {
    background-image: url(link image 2);
}
#MegaMenu-Content-3 li:nth-child(3):before {
    background-image: url(link image 3);
}
#MegaMenu-Content-3 li:nth-child(4):before {
    background-image: url(link image 4);
}

Hope it helps!

Litos - Shopify Development Service Provider
Need to develop or customize your Shopify store, feel free to contact us here.
AndresCW
Visitor
3 0 0

Hi @Litos 

 

Thanks for your help! 

The code indeed modify the menu and place a picture before, but, it also repeat the picture in the sub levels

AndresCW_0-1683889902831.png

L-Shape is a sublevel of Eco Stand which should not be affected by the css #MegaMenu-Contect-2.

However it also repeats the picture on it.

 

Could you please help me to take the picture of the sublevel out?

Here a picture of how the menu is structured:

AndresCW_1-1683890021372.png

Note: I use the theme Refresh.

 

smike45
Tourist
7 0 2

Hello. Have you been able to find a solution to the problem? I am also trying to arrange the sub-items of the megamenus horizontally. How did you manage that? Kind regards, Mike

AndresCW
Visitor
3 0 0

Hey @smike45 

 

I have not found solution to remove the second level image.

 

Regarding the horizontal, in the theme settings you can modify the menu in the header section and there select from the droplist megamenu and not drawer.

Then it gets horizontal. Or at least on my Theme "REFRESH"

smike45
Tourist
7 0 2

Hey @AndresCW,

 

thanks for the info regarding the horizontal arrangement!
Is it possible to post a screenshot of your exact settings?
Thank you very much,
Mike

AndresCW
Visitor
3 0 0

Sure @smike45

AndresCW_0-1684911723833.pngAndresCW_1-1684911774297.png

 

Melo5
Shopify Partner
2 0 0

Hi, how would this be done if you wanted to change the images in the CMS and not have to edit the code with the image URL each time?

 

Also, can this be done by targeting a level 2 link and their sib items within that instead of the mega-menu items?

 

Is this possible?

 

Thank you 🙂 

michael-helium
Shopify Expert
352 5 176

It's possible for $8/month with Meteor Mega Menu

Michael, COO @ Helium
- Customer Fields ✪✪✪✪✪ (346 reviews)
- Meteor Mega Menu ✪✪✪✪✪ (265 reviews)
Melo5
Shopify Partner
2 0 0

@Litos 

 

Hi, how would this be done if you wanted to change the images in the CMS and not have to edit the code with the image URL each time?

 

Also, can this be done by targeting a level 2 link and their sib items within that instead of the mega-menu items?

 

Is this possible?

 

Thank you 

michael-helium
Shopify Expert
352 5 176

The Meteor Mega Menu app has pre-made templates so you can publish images to your menus in just a couple minutes. Our prism template sounds like exactly what you're looking for: 

Image 2023-09-20 at 11.05.33 AM.png

Michael, COO @ Helium
- Customer Fields ✪✪✪✪✪ (346 reviews)
- Meteor Mega Menu ✪✪✪✪✪ (265 reviews)