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:
#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!
First of all try group your duplicated css into a groups like that:
Then try add
!important
after these rules: