Dawn Theme - Add Images to Mega Menu

PhilLennart
Shopify Partner
33 0 22

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.

 

Screenshot 2023-01-18 at 02.59.42.png

 

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

 

Screenshot 2023-01-18 at 03.00.51.png

 

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

Replies 9 (9)

BSS-Commerce
Shopify Expert
3477 461 515

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

PhilLennart
Shopify Partner
33 0 22
BSS-Commerce
Shopify Expert
3477 461 515

Hi @PhilLennart 

Please follow these steps:

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

view - 2023-01-18T174000.992.png

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

view - 2023-01-18T174156.526.png

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.

view - 2023-01-18T174418.084.png

- Add new item for services:

view - 2023-01-18T174443.991.png

- Here is the result:

view - 2023-01-18T174446.755.png

I hope that it will work for you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

PhilLennart
Shopify Partner
33 0 22

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
Shopify Partner
33 0 22

Hey, are you able to give the right solution?

BSS-Commerce
Shopify Expert
3477 461 515

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. 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

PhilLennart
Shopify Partner
33 0 22

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

Aromaxima
Visitor
2 0 0

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

Aromaxima
Visitor
2 0 0

I would like also like to add images to my web