Archived topic
Change Background color to sub-sub-element
7 replies · Started by Javiera on December 14, 2022
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).
Hi there,
Can you tell me which menu item are you trying to change the background color?
Yes
- CIBER INTELIGENCIA / INTELIGENCIA OPERATIVA
- INVESTIGACIÓN FORENSE INFORMÁTICA
- INTELIGENCIA MARÍTIMA
Those 3.
Thank you.
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.
Hi Fernando!
Just the elements. But it doesn't work.
Maybe I did something wrong.
Hi there,
where did you add the CSS? Can you try adding it before ALL other CSS ?
That works! Thank you so much!
You're welcome
