Current menu item

Question

I'm trying to figure out why my text is not showing white as it should.

I'm overriding bootstrap.min.css in style.css the current-menu class in Wordpress, but no success. It highlights the right tab, but the text color is not changing.

Can anyone spot the problem?

.current-menu-item > a{
background-color:#123456;
}
.menu-item:hover > a{
background-color:#123456;
color: white;
}

I tried this too:

.current-menu-item > a{
background-color:#123456;
}

.current-menu-item:hover{
background-color:#123456;
color: white;
}

Answer 1

Are you only trying to change the text colour on hover?

If you just want to change the text colour (not JUST on hover, but also just when the user is on that page).

/* This targets the current page's menu item */
.current-menu-item > a{
background-color:#123456;
color: white;
}

/* This targets other menu items when you hover over them */
.menu-item:hover > a{
background-color:#123456;
color: white;
}

If you need more specificity, then you can either add the .menu-item class, or whatever bootstrap class is being applied (.nav or .nav-bar usually)

So your first rule would be

.menu-item.current-menu-item > a{
background-color:#123456;
color: white;
}

This is just based on the picture, without seeing the actual markup, it's hard to tell - but just inspect the element using your browser's built in dev tools and you should be able to easily see what styles are being applied and with what specificity, then you simply craft your rule to be higher.

Answer 2

I suspect that your problem here is priority, not your code. I see why you don't want to make changes to the bootstrap stylesheet and rather adding this changes to your main stylesheet.

The main stylesheet gets loaded first, so any changes you are making to bootstrap will be loaded first via your main stylesheet.

Your bootstrap stylesheet gets loaded after your main stylesheet, so this means all the changes get overridden by the default styles in the bootstrap stylesheet, that is why you don't see your changes.

There are two ways to combat that, one been adding css priority !important to all the custom styles (a method I don't encourage and don't like using) or creating a custom stylesheet and setting a low priority (something like 999, must be a number bigger than 10) when enqueueing it (preferred method). For example, create a custom stylesheet and call it custom-style.css.

function enqueue_custom_style() {
    <--- enqueue custom stylesheet --->
 }

add_action( 'wp_enqueue_scripts', 'enqueue_custom_style', 999 );