Background image not showing with highlight on menu active item in wordpress

1 Views

I created a menu in wordpress where the Home page is represented by an image instead of the word “Home” and I inserted it as a background-image. The problem is that the active menu item also has a highlight effect, and when the Home page is active my image is not shown.

My code is:

Read More
#topmenu li:first-child a {
    color: transparent;
}

#topmenu li:first-child {
    background-image: url('http://localhost/plugandboomwordpress/wp-content/uploads/2015/04/logo.png');
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: bottom;
}

#topmenu a:hover {
background: darkgray;
color: white;
transition: background-color .5s;
}

#topmenu li:first-child a:hover {
    background-image: url('http://localhost/plugandboomwordpress/wp-content/uploads/2015/04/logo.png');
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: bottom;
}

#topmenu .current-menu-item a {
    background: darkgray;
    color: white;
}

Any ideas on how to solve this? Thanks!

Post Views: 1

Related posts

1 comment

  1. First of all try group your duplicated css into a groups like that:

    #topmenu li:first-child,
#topmenu li:first-child a:hover{
    background-image: url('http://localhost/plugandboomwordpress/wp-content/uploads/2015/04/logo.png');
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: bottom;
}

    Then try add !important after these rules:

    #topmenu .current-menu-item:first-child a {
    background-image: url('http://localhost/plugandboomwordpress/wp-content/uploads/2015/04/logo.png') !important;
}

Comments are closed.