1

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

enter image description here

1
  • There is probably a tule with more specifity. Looks like a pure CSS though.
    – s_ha_dum
    May 18, 2014 at 22:33

2 Answers 2

2

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.

7
  • Thank you aj-adl, I'll try this after work today. Many thanks May 19, 2014 at 8:18
  • Its not working, I tried this: .menu-item.current-menu-item > a{ background-color:#123456; color: white; } .nav.menu-item.current-menu-item:hover > a{ background-color:#123456; color: white; } and this is the markup <ul id="menu-menu-1" class="nav navbar-nav navbar-right"> May 19, 2014 at 20:35
  • actually i tried more options. Will keep trying tweaking, thanks May 19, 2014 at 20:37
  • well, it works while its active, but i would like to have the same effect when hovering over the item too, and this is confusing. my css:[i.imgur.com/xM0hV0p.png] markup [i.imgur.com/55M3cGC.png] and navigation [i.imgur.com/MYX8FF8.png] thanks May 19, 2014 at 21:28
  • 1
    OK, you will likely just need to add some more rules then targeting the different parts and the states they can be in i.e. menu item, menu item on hover, current menu item, current menu item on hover. I have made a gist with some heavily commented CSS in it which will hopefully explain what is going on check it out here and then place your actual rules inside the { } braces. Feel free to delete the comments once you understand what is happening (stuff between /* and */
    – aj-adl
    May 19, 2014 at 23:29
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 );
1
  • 1
    This sounds very interesting, I'll try that after work today. Thank you Pieter. May 19, 2014 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.