How do I add a background color and border to the dropdown megamenu in Turbo theme?

Store Design
1

Hi all,

I’d like to add a background color and border to the dropdown megamenu in Turbo theme, but to the dropdown only and not the main menu in the header. In other words, my menu in the header would remain white, but when clicked, the dropdown would show a background (#F5F7F8) with a border (#e8e8e8) so that it stands out distinctly from the white page behind it. How do I go about this? Any help would be greatly appreciated.

2

@JaySway
Kindly Share your Store URL.

3

@Zworthkey https://route-119-online.myshopify.com/

4

hii, @JaySway
Can you give me a screenshot of which dropdown menu,
You want to change.
thank you.

5

hii @JaySway
Paste this code on the top of the style.css file.

ul.vertical-menu_submenu {
    background-color: #F5F7F8 !important;
}

ul.vertical-menu_submenu li {
    border: 1px solid black !important;
}

Thank You.

6

@Zworthkey This works great for the menu items that do not have a megamenu. Have a look at, say, the ‘Days of Deals’ and ‘Catalog’ dropdown megamenus. How do I apply the same to these as well? Additionally, the black border is a bit too strong/overwhelming… how do I get it to the light gray such as the line that splits the header? :slightly_smiling_face:

7

hii, @JaySway
Paste this code on the top of the style.css file.

.mega-menu__image-caption-link {
    border: 1px solid black !important;
}
8

@Zworthkey A million thanks!

1 Like
9

@JaySway
Most Welcome.