Archived topic
Changing hover and active effect on main menu
7 replies · Started by Pedro on April 5, 2018
I added this to my menu:
.menu-item {
transition: box-shadow 0.6s linear;
}
.menu-item:hover {
box-shadow: 0px 1.5px 0px 0px #000;
}So it displays a thin line under the menu item I'm hovering over
and it's working fine but I can't manage to make it stay fixed on the active menu item, I've tried with:
.menu-item:active {
box-shadow: 0px 1.5px 0px 0px #000;
}with no success, any help would be appreciated.
Thanks
Hi there,
I'm not seeing any CSS being added.
Can you try these selector instead?
.main-navigation .main-nav > ul > li > a
.main-navigation .main-nav > ul > li > a:hover
.main-navigation .main-nav > ul > li[class*="current-menu-"] > a
Let me know.
Thank you very much Leo, that did the trick.
sorry about the CSS, I was trying different things :)
just one more thing though, is there any easy way to customize the search bar?, because right now I can't use it and I guess it is due to my color configuration.
No problem!
Can you open a new topic for the separate question?
Thanks!
Of course, thank you again
No problem!
This is the answer I've been looking for for ages (to be more precise: the third selector). Thanks!
No problem :)
