[Resolved] Changing hover and active effect on main menu

[Pedro]

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

[Leo]

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.

[Pedro]

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.

[Leo]

No problem!

Can you open a new topic for the separate question?

Thanks!

[Pedro]

Of course, thank you again

[Leo]

No problem!

[Annick]

This is the answer I’ve been looking for for ages (to be more precise: the third selector). Thanks!

[Leo]

No problem 🙂

[Author]

Posts