[Support request] Change Background color to sub-sub-element

[Javiera]

Hi! First of all, thank you so much for this wonderful theme, I use this in every web I make.
I have this website (http://just2023.temp.domains/~complexb/) and I’m trying to change the background color to some elements on the menu.

I have products (productos), 3 main categories, and other pages that belong to each category. Now is kind of confusing, I would like to change the background color to the main categories.

I’ve already have this CSS:

#mobile-header {
background-color: #1d2828;
}
div#mobile-menu {
background-color: #1d2828;
}

div#mobile-menu a {
color: #fff;
}

@media (min-width: 768px) {
.main-navigation .menu>.menu-item>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:before {
content: “”;
position: absolute;
display: block;
bottom: 1em;
width: 0%;
height: 2px;
background-color: currentColor;
-webkit-transition: 0.3s width ease;
transition: 0.3s width ease;
}

.main-navigation .menu>.menu-item:hover>a:before,
.main-navigation .menu>.menu-item.sfHover>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:hover:before {
width: calc(100% – 40px);

So maybe when I try to change the colors with the menu-item number, it doesn’t work.

Could you please help me? (sry for my english, is not my first language).

[Ying]

Hi there,

Can you tell me which menu item are you trying to change the background color?

[Javiera]

Yes
– CIBER INTELIGENCIA / INTELIGENCIA OPERATIVA
– INVESTIGACIÓN FORENSE INFORMÁTICA
– INTELIGENCIA MARÍTIMA

Those 3.

Thank you.

[Fernando]

Hi Javiera,

To clarify, are you trying to change the Background color of the entire sub-menu or just the Elements?

To change the Background color of the entire sub-menu, try adding this CSS through Appearance > Customize > Additional CSS:

div#primary-menu > ul > li:nth-of-type(2) ul {
    background-color: #ff0000
}

Otherwise, try this:

div#primary-menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) {
    background-color: #ff0000
}

div#primary-menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(2) {
    background-color: #00ff00
}

div#primary-menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(3) {
    background-color: #0000ff
}

Let us know how it goes.

[Javiera]

Hi Fernando!
Just the elements. But it doesn’t work.
Maybe I did something wrong.

[David]

Hi there,

where did you add the CSS? Can you try adding it before ALL other CSS ?

[Javiera]

That works! Thank you so much!

[David]

You’re welcome

[Author]

Posts