Can I add images to each mega menu item in the Dawn theme?

[chocolatte1234]

 

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

Thanks!

[Litos]

Hi @chocolatte1234,

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

[chocolatte1234]

4 images! like the red line you drew

[Litos]

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!

[AndresCW]

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

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:

Note: I use the theme Refresh.

[smike45]

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]

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]

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]

Sure @smike45

[Melo5]

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]

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

[Melo5]

@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]

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: