Hi,
I’ve searched and tried almost every suggestion related in this forum but to no avail.
I need that the menus of my current site behave like the menus of my previous theme site. Every category menu must have a color associated: hovering and activate/select them must show that background colour.
I achieved the hovering part with this kind of code for every menu:
.menu-item-131 > a:hover {
background-color: brown;
color: white;
}
.menu-item-132 > a:hover {
background-color: yellow;
color: black;
}
But it’s impossible obtain the same for the active/selected effect with a similar code like:
.menu-item-131 > a:active {
background-color: brown;
color: white;
}
I UNDERSTAND THE PROBLEM IS THAT NEWSPAPER MANAGE THE ACTIVE/SELECTED STATE THROUGH A current-menu-item CLASS. After a lot of effort, at least I managed to get NO active/selected color through this code:
.tdm-menu-active-style5 .tdm-header .td-header-menu-wrap .sf-menu>.current-menu-item>a {
background-color: inherit [it’s the same with initial];
color: inherit [it’s the same with initial];
}
BUT now I can’t find a way of showing ANY color in the active/selected state.
You can see how it’s working on: http://migueldimase.com/
Thanks
Hi,
I see you colored the menu items as you want, each with it’s own color. The theme has settings only per general.
The active state has this setting as well, per general
– https://www.screencast.com/t/IKIb4b0uEJKh
So now you want to set the same colors for the active state of the menu items, you could use the theme class for that along the menu ID class, like this example
– https://www.screencast.com/t/wxGhAVUEz3
.current-menu-item.menu-item-134 {
background-color: blue;
}
Create a code with the same colors as you used before for each menu item.
Thanks
Ah, the .current-menu-item CAN be followed by an item reference and this move out the “active” selector… Perfect.
By the way, doesn’t again if a remove the instructions:
.tdm-menu-active-style5 .tdm-header .td-header-menu-wrap .sf-menu>.current-menu-item>a {
background-color: inherit;
color: inherit;
}
Is this the way it should be done or is there a better way of “nulling” the default current-menu-item behaviour?
Thank you, Simion!
Glad it works. Either leave that code as well, or remove it and create the new code like this
– https://www.screencast.com/t/LZVK6QooJZo
Each method would work.
It’s strange…
Commenting this:
/* .tdm-menu-active-style5 .tdm-header .td-header-menu-wrap .sf-menu>.current-menu-item>a {
background-color: inherit;
color: inherit;
} */
…this code (with !important) does not work (does not mantain the active custom color, and returns to the Nespaper’s default):
#menu-principal-1 > .menu-item-131 > a:hover, .current-menu-item.menu-item-131 {
background-color: brown !important;
color: white !important;
}
I made something wrong?
Removing/commenting that code will indeed color the menu items as default
– https://www.screencast.com/t/jCOYUDB5JRWB
But you can then do this – https://www.screencast.com/t/LZVK6QooJZo
Either would work, leave your code as it is, or remove it and modify the code I provided above like this
– https://www.screencast.com/t/Encbfe1lGWvZ
Oh, sorry! I had omitted the “a” selector! Works now.
Thank you!
