How to change “Main menu color background” with CSS

Hi,

The main menu background can be changed in the theme panel, this will affect the whole website. An option to have different colors by category does not exist, unless custom code is used.

This is an example where I used a code to achieve different backgrounds, by category
– https://www.screencast.com/t/sqfbHe3jV
– https://www.screencast.com/t/5ELJAvc5p
Notice that that by using the category unique class in the code, the results are like you want. Each category page displays the category name and category ID on the body
– https://www.screencast.com/t/VS62hv9PJ
You can use either one in the code
– https://www.screencast.com/t/t1cXHbXgK
This is the code used in the example

.category-2367 .td-header-wrap .td-header-menu-wrap-full {
background-color: blue;
}

Create a different one for each category, then enter it in Theme panel->Custom CSS
– https://www.screencast.com/t/C6nCeuB5HF

This is also a useful tutorial about using the browser inspector to identify the elements on the page and created code for various customization
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks