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

  • There is probably a tule with more specifity. Looks like a pure CSS though. – s_ha_dum May 18 '14 at 22:33
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.

| improve this answer | |
  • Thank you aj-adl, I'll try this after work today. Many thanks – Linards Berzins May 19 '14 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"> – Linards Berzins May 19 '14 at 20:35
  • actually i tried more options. Will keep trying tweaking, thanks – Linards Berzins May 19 '14 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 – Linards Berzins May 19 '14 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 '14 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 );
| improve this answer | |
  • 1
    This sounds very interesting, I'll try that after work today. Thank you Pieter. – Linards Berzins May 19 '14 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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