Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Setup a Bootstrap Theme Creating Bootstrap Navigation in WordPress

Rebecca Jensen
Rebecca Jensen
11,580 Points
Posted by Rebecca Jensen
Rebecca Jensen
11,580 Points

How do I target 'hovering the current menu item link'?

This video addresses how to make the Bootstrap hover style work again (make the background #000), but the bug is that when you hover over the current menu item, it doesn't show the correct style (background changes to gray, instead of staying black).

How should I target the current-menu-item link while hovering? I've tried .current-menu-item > a:hover and some other things, with no success.

3 Answers

Marko Rapaic
Marko Rapaic
13,871 Points
Marko Rapaic
Marko Rapaic
13,871 Points

Hi Rebecca,

I believe it would look like this:

.current-menu-item a:hover {
    /* insert current menu item styles here */
}
Luke Bailey
Luke Bailey
3,343 Points
Luke Bailey
Luke Bailey
3,343 Points

Hi Rebecca and Marko,

I had a moment of confusion over this also. It's a very simple answer and solution, but one that could be easily overlooked. Because you're still using the .current-menu-item you won't see any changes. This selector only affects the current menu item - we want to select any menu item when hovered.

This is the correct code to use:

.menu-item:hover {
    background:#000;
}
Marko Rapaic
Marko Rapaic
13,871 Points
Marko Rapaic
Marko Rapaic
13,871 Points

Thanks for responding Luke, I believe the code you've provided would target the hover states of ALL menu items; not the current menu item specifically, which is what I believe Rebecca was trying to target.

Sanjeev Veloo
Sanjeev Veloo
4,713 Points
Sanjeev Veloo
Sanjeev Veloo
4,713 Points

Thanks Luke! That worked just fine :)