Change Current Link Color

  • I’m trying to change the primary menu link color for the current page on https://www.boxmyart.com/about/

    I’m using Bootstrap 3.0.3 and WordPress 4.5.3. I’ve spent a few hours on this reading multiple responses to similar questions. I’ve tried at least a dozen different ways of getting it to work but so far, no luck.

    Here is the CSS I currently have:

    .navbar-default .navbar-nav .current-menu-item a,
.navbar-default .navbar-nav .current_page_item a {
    background-color: #17b6ba !important;
    color: #fff !important;
}

    I’ve also tried:

    .navbar-default .navbar-nav > li > .current-menu-item a,
.navbar-default .navbar-nav > li > .current_page_item a {
    background-color: #17b6ba !important;
    color: #fff !important;
}

    Any help would be greatly appreciated!

Viewing 5 replies - 1 through 5 (of 5 total)

  • This changes the font color:

    .navbar-default .navbar-nav > li > a {
    color: #fff;
}
    Thread Starter vintage_rock07

    (@vintage_rock07)

    Thanks lisakaye. I appreciate you taking the time to respond.

    I’m actually trying to change the font color and background color for the current page. So if it’s on About, I want About highlighted… If it’s on Subscribe, I want Subscribe highlighted… etc.

    Oh, so the ACTIVE link… I asked the exact same question for the site I’m working on and got the following from a WP guru:

    .navbar-default .navbar-nav .current_page_item > a, .main-navigation .current-menu-item > a {
    color: #fff;
    background-color: #17b6ba;
    }

    Note – I’ve changed bits to be specific to your theme, but in theory it should work… alas I’m no expert.

    Oops – sorry, forgot to use back ticks for code!

    .navbar-default .navbar-nav .current_page_item > a, .main-navigation .current-menu-item > a {
color: #fff;
background-color: #17b6ba;
}
    Thread Starter vintage_rock07

    (@vintage_rock07)

    Thanks lisakaya. I just attempted that method as well. Still no luck unfortunately.

    I’m wondering if it’s an ordering issue or something being overridden by Bootstrap CSS. Using the !important declaration didn’t even help. I’ve tried so many things but just can’t seem to pinpoint the issue.

    Thanks for your help though!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change Current Link Color’ is closed to new replies.