main menu active back color

  • Resolved ilinus

    (@ilinus)


    9 years, 7 months ago

    I want to change the back color of the active main menu link, the current page I’m on, but does not seem to manage with my CSS. The following css works on focus selector but not on active.

    .kad-header-style-basic #nav-main ul.sf-menu li a:active {
    background: #FFFFFF;
    }

    Any ideas?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Tahoerock

    (@tahoerock)

    9 years, 7 months ago

    Hi Ilinus,
    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    I’m doing this on my browser to find solution.
    It can get to some different behavior on your site.
    It can happen that it is not working.
    Then we have to look further.

    .sf-menu a:active, .sf-menu a:focus, .sf-menu a:hover {
    background-color: red;
}

or

.sf-menu a:active, .sf-menu a:focus, .sf-menu a:hover {
    background-color: red!important;
}

    Hope Im helpful
    Cheers
    @tahoerock

    Tahoerock

    (@tahoerock)

    9 years, 7 months ago

    Hi again,
    I installed pinnacle theme on my server and that code up is not working.
    Theme is not working with active page property/class
    It is working with .current-menu-item class
    SCREENSHOT

    SOOOO:
    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    I’m doing this on my browser to find solution.
    It can get to some different behavior on your site.
    It can happen that it is not working.
    Then we have to look further.

    Here is what I got to work here
    To change background:

    .current-menu-item a {
    background: red;
}

or

.current-menu-item a {
    background: red!important;
}

    To Change Typing:

    .current-menu-item a span{
    color: red;
}

or

.current-menu-item a span{
    color: red!important;
}

    Change red color to any you like.
    Cheers
    @tahoerock

    • This reply was modified 9 years, 7 months ago by Tahoerock.
    • This reply was modified 9 years, 7 months ago by Tahoerock.
    hannah

    (@hannahritner)

    9 years, 7 months ago

    Hi ilinus,
    You can use this css:

    li.current-menu-item.current_page_item {
    background: #fff;
}

    Just paste it into your custom css box in Theme Options > Custom CSS.

    Hannah

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

The topic ‘main menu active back color’ is closed to new replies.