[Resolved] Adding Icon on Hover/Active to a Menu Item with CSS

[Julia Wegmayr]

Dear GP Team,

I’d like to underline my menu items on hover and for the active menu item as well. In addition there should appear an icon on the left of the menu item on hover/active.

I used the following CSS for doing so, but the icon is only shown in the menu on the main page, but not on any other. Do you have any idea, how to show it on every page?

.main-navigation li a:after {
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    content: "";
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:after, 
.main-navigation .main-nav ul li:hover > a:after, 
.main-navigation .main-nav ul li.sfHover:hover > a:after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 3px solid #82b62c;
    position: relative;
    top: -10px;
    opacity: 1;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a:before, 
.main-navigation .main-nav ul li:hover > a:before, 
.main-navigation .main-nav ul li.sfHover:hover > a:before {
	  background: url(wp-content/uploads/2022/08/Pfoto.jpg);
    background-size: 25px;
    display: inline-block;
    width: 25px; 
    height: 25px;
    content:"";
		background-repeat: no-repeat;
		margin-bottom: -7px;
	margin-right: 8px;
}
  
}

Thank you so much for your help 🙂

[David]

Hi there,

the other pages the image is returning a 404 error.
In your CSS this line:

background: url(wp-content/uploads/2022/08/Pfoto.jpg);

Change the URL so it is the Full path to the image file.

[Julia Wegmayr]

Thank you so much, David!
It works now 🙂

[David]

Glad to hear that!

[Author]

Posts