How can I change the color of a specific menu on my website?

[John_Starc]

Hi,

I want to change the color for a specific menu and that menu is SALE along with all subcategories.

Here is the URL https://www.cloudstore.pk/collections/just-arrived please help to change the SALE color in Red.

 TIA. 

[MarinaPetrovic · Accepted solution]

Hi @John_Starc , fastest solution is - go to edit code > assets > base.css and add this:

#HeaderMenu-MenuList-5 li a,
#Details-HeaderMenu-5 span{
color:red;
}

Please note that if you change order in your menu this will be changed too. 

[Wish-It · Accepted solution]

Add this CSS if you want to change the color dropdown arrow to alongwith the of menu

#HeaderMenu-MenuList-5 li a, #Details-HeaderMenu-5 span {
    color: red;
}
#Details-HeaderMenu-5 .icon-caret {
    color: red;
}

Replace "red" with the color code that you want. You can add this code to bottom of base.css file or use an app like this to add custom css to any theme file.

[MarinaPetrovic · Accepted solution]

Hi @John_Starc , fastest solution is - go to edit code > assets > base.css and add this:

#HeaderMenu-MenuList-5 li a,
#Details-HeaderMenu-5 span{
color:red;
}

Please note that if you change order in your menu this will be changed too. 

[John_Starc]

Thank you for sharing. Working fine for the desktop, how it can be changed for mobile as well?

[Wish-It · Accepted solution]

Add this CSS for mobile version,

details#Details-menu-drawer-menu-item-5 * {
    color: red;
}

[John_Starc]

It really works, thanks a lot. Can you do me another favor to align the product images at the collection page? As many of the images are not aligned and cant manage them manually because those are in large numbers so need any code to fix them. 

https://www.cloudstore.pk/collections/boys

[Wish-It]

The images are of different size, it would require theme code changes to set fixed height and get images fit within it. You can create it as a task here in our app, we can have a look and resolve it. The first task is free.

[Wish-It · Accepted solution]

Add this CSS if you want to change the color dropdown arrow to alongwith the of menu

#HeaderMenu-MenuList-5 li a, #Details-HeaderMenu-5 span {
    color: red;
}
#Details-HeaderMenu-5 .icon-caret {
    color: red;
}

Replace "red" with the color code that you want. You can add this code to bottom of base.css file or use an app like this to add custom css to any theme file.