How can I add images to the mega menu in the Dawn theme?

[PhilLennart]

Hey together,

I would like to add images to my mega menu with my dawn theme. However, I would like to avoid using an app for it.

This is what it currently looks like. I added a "." as a sub-section to push all the menu items as a header.

 

If I do not add the "." it looks like this:

So my question would be how to 1. add images to each menu item 2. how to make all sections headers without having to add another sub menu item.

Thank you in advance

[BSS-Commerce]

Hi @PhilLennart 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[PhilLennart]

https://breathebar.myshopify.com/

Pw is: breathe

[BSS-Commerce]

Hi @PhilLennart 

Please follow these steps:

- In the Admin page, Online Store => Theme => Edit Code

1. You want to add the background for the mega menu. Please find the file component-mega-menu.css.

And add the following code:

.mega-menu .mega-menu__content {
  background-image: url("https://www.w3schools.com/howto/img_snow_wide.jpg");
  background-size: 100% 100%;
}

You can change the path of the appropriate image

2. Create one more menu without a sub-menu item

Please go to Online Store => Navigation => Edit header menu.

- Add new item for services:

- Here is the result:

I hope that it will work for you.

[PhilLennart]

This is not exactly what I was asking for. I would like to add an image for each sub-menu item. So in this case an image for "Oxygen Bar", "Aqua Massage",...

Your solution adds a background to the whole menu

Also I meant that I would like to display the sub-menu items (oxygen bar, aqua massage,...) next to each other like the first screenshot I sent, however they do not show up like that if I do not add a sub-sub-menu item (the "." under "Oxygen Bar")

[PhilLennart]

Hey, are you able to give the right solution?

[BSS-Commerce]

Hi @PhilLennart 

Because your request is quite complicated, if possible, please share your store access with us. Then we will check it and suggest you a solution. 

[PhilLennart]

Can I share it in private? It's a client website and don't want to reveal it

[Aromaxima]

Hello there i would like to do the same can you plz teach me as will

[Aromaxima]

I would like also like to add images to my web