Need help? Check out our Support site, then

Twenty Fourteen - How to change color of current item in primary menu ?

  1. Hi,
    I am using Twenty Fourteen theme, with some CSS customizations, I would like to change the color orange of the highlight item (which is the current one) in the menu, with a stronger orange color, could you tell me how to do this ?
    See :

    Thanks for you help,

    My site :, currently private as it's still underground construction phase

    The blog I need help with is

  2. Hi there, the following will change the text color of current menu items to the same orange you have set for "Nourvelles" in your sidebar. You can edit that color code as desired if you want something different.

    .site-navigation .current_page_item > a, .site-navigation .current_page_ancestor > a, .site-navigation .current-menu-item > a, .site-navigation .current-menu-ancestor > a, .site-navigation .current_page_item > a:after, .site-navigation .current_page_ancestor > a:after, .site-navigation .current-menu-item > a:after, .site-navigation .current-menu-ancestor > a:after {
        color: #FF6600;
  3. Hi, thanks for your prompt answer, your code is doing it !

    - In the same order, I think you could hep me to also change the color of the "square" for selected feature item, in the frontpage slider of the same theme, which currently moves from white color to grey color when me change the feature item in this slider ?

    See :

    I would like to have my red color in place of the grey ...

    Thanks for your support

  4. Hi, I'm not seeing the slider on your main page right now, but the grid of featured posts.

  5. Hi, I just changed to slider on main page so you could see and help me, thanks

  6. Many thanks for changing back. This would be the code for the active square (dark grey).

    .slider-control-paging .slider-active:before, .slider-control-paging .slider-active:hover:before {
        background-color: #C10026;

    This is the light grey for the inactive squares.

    .slider-control-paging a:before {
        background-color: #66FF55;

    There is also a hover color set for the inactive squares and this would be the code for it.

    .slider-control-paging a:hover:before {
        background-color: #ffee55;

    Oh yeah, and please exuse my obnoxious demo colors. ;)

  7. Hi,

    Yeah your green is awful, but the lesson was very clear, thanks to you again


  8. You are welcome. :)

  9. Hi,

    I have a new question about color with a widget within tweenty-fourteen theme, as I've closed this current subject, I opened a new one here :

    I hope you could help me again on this new issue,
    Thanks and best regards

Topic Closed

This topic has been closed to new replies.

About this Topic