How to change the background colour of my drop down menus and add an image to each item

[ktierney]

Hello!

I just want to change the background colour of my two drop down menus “Shop” and “Sustainable product shout outs” (currently the colour is the same as the page and it blends in too much.

I also want to see if I can add an image of each product in the drop down menu like the example below.

Website is www.houseoftierney.com.au

Any advice would be much appreciated!

[PageFly-Richard]

Hi @ktierney , This is Richard from PageFly - Landing page builder.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

I hope it would help you Best regards,

Richard | PageFly

[Van_Nguyen_GSG]

Hi Ktierney,

1. To change background color of any menu items which have sub menu (dropdown) > paste this code at the end of base.css :

.header .js details > .header__submenu {

background-color: #ffffff;

}

You can change the color hex code to color you want

2. Adding product image to the submenu items:

Find where the childlink stay in the code and place this piece of code under the childlink.title:

{% if childlink.type == “product_link” %}
{{ childlink.object.featured_image | image_url: width: 150 | image_tag:
class: ‘link-image’,
alt: childlink.object.featured_image.alt,
preload: true
}}
{% endif %}

The screenshot of my demo store using Dawn theme:

If you still need help, feel free to contact me.

[websensepro]

Hi @ktierney

1. Go to the online store

2. Edit the code base.css file below paste the code

ul#HeaderMenu-MenuList-6 {
background: #fff;

}

[ktierney]

Hello! That demo is exactly what I want with the pictures next to the item.

Sorry I don’t really understand your instructions though.

When you say “Find where the childlink stay in the code” what does this mean? I tried Ctrl “childlink” in the code but nothing came up.

[Van_Nguyen_GSG]

Hi,

Your theme might be different. But the logic is the same. Go to sections > header.liquid > find where in the code that render the dropdown child-link (the name can be different to your theme) and apply my code above.

If you still need help, feel free to contact me.

[ktierney]

Hello,

this worked to change the desktop screen website but it’s still the same on the mobile layout. How would I fix this?

[ktierney]

I still need help lol

Will email you

[ktierney]

Thank you so much for your help! It’s perfect now!

[Jetlag_Mode]

Hello Kat! I am trying to apply this to my website but haven’t been able, do you think you can help me please?

[CraigAndersonZA]

Hello I am still struggling to get this code to change the background color of the drop down menu, please can you assist me?