CODEWITHSUNDEEP
htmlcss
Tee Famakin
Tee Famakin

Reputation: 158

change wordpress navigation item menu background color on active

hello i am trying to change the background color of my menu item when ever a page is active or selected, i tried it the normal way using css, this what i have tried

#tve_editor .thrv_widget_menu.thrv_wrapper ul.tve_w_menu a:selected {
    color: #373737;
    text-decoration: none;
    display: inline-block;
    line-height: 1;
    padding: 10px 0;
    position: relative;
    background-color: blue;
}
#tve_editor .thrv_widget_menu.thrv_wrapper ul.tve_w_menu a:active {
    color: #373737;
    text-decoration: none;
    display: inline-block;
    line-height: 1;
    padding: 10px 0;
    position: relative;
    background-color: blue;
}

#tve_editor .thrv_widget_menu.thrv_wrapper ul.tve_w_menu a:current {
    color: #373737;
    text-decoration: none;
    display: inline-block;
    line-height: 1;
    padding: 10px 0;
    position: relative;
    background-color: blue;
}

This is what i am trying to achieve

enter image description here

This is the present page you can see the state of the menu: web link

Is there any other way i can get this menu to look that way?

Upvotes: 1

Views: 733

Answers (2)

Johann Kratzik
Johann Kratzik

Reputation: 794

#tve_editor .thrv_widget_menu.thrv_wrapper ul.tve_w_menu li.current-menu-item > a {
    color: #373737;
    text-decoration: none;
    display: inline-block;
    line-height: 1;
    padding: 10px 0;
    position: relative;
    background-color: blue;
}

Upvotes: 0

user4381598
user4381598

Reputation:

You need to use hover css selector.Take a look here! http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more1

something like:

#tve_editor .thrv_widget_menu.thrv_wrapper ul.tve_w_menu a:hover {
    color: #373737;
    text-decoration: none;
    display: inline-block;
    line-height: 1;
    padding: 10px 0;
    position: relative;
    background-color: yellow;
}

Upvotes: 1

Related Questions