Archived topic
no hover color state with page anchors
9 replies · Started by comichouse on November 29, 2017
Our menu does not show a hover coler. I suspect this is because all links are really achors on the same page. How can we fix this?
They're all current menu items, which don't have hover states by default.
You can add them with a little CSS:
.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
background-color: #222;
color: #fff;
}
That works great, thanks!
No problem! :)
Whoops! And now it doesn't work anymore... Did something change in the new version?
What I want to achieve is a centered menu with hovers. The menu should collaps to a hamburger on mobile. Another thing that broke is the mobile menu doesn't dissapear anymore after clicking on a menu item.
This is the current css I use:
@media (max-width: 768) {
.main-navigation .main-nav ul li a {
text-align: center;
}
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
background-color: #ff5a00;
color: #ffffff;
}
Hmm the hover colors is still working for me: http://www.screencast.com/t/DzhBVqEc
Just tested the menu on mobile too and it works for me as well. What's not working for you?
Sorry for not being clear. It is the mobile menu that will not center anymore. In the CSS I use a center align property. But all menu items have a text-align: left!important; property and I'm not sure where this is coming from...
It does collapse now after clicking an item. I guess this is due to the most recent update?
Cheers,
Hans
I don't see: text-align: left!important;
But anyways you have a syntax error:
@media (max-width: 768)
should be:
@media (max-width: 768px)
Aaaargh!!! Thx :)
No problem :)