[Resolved] no hover color state with page anchors

[comichouse]

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?

[Tom]

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;
}

[comichouse]

That works great, thanks!

[Tom]

No problem! 🙂

[comichouse]

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;
}

[Leo]

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?

[comichouse]

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

[Leo]

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)

[comichouse]

Aaaargh!!! Thx 🙂

[Leo]

No problem 🙂

[Author]

Posts