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

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

Home Forums Support Adding Icon on Hover/Active to a Menu Item with CSS

  • This topic has 3 replies, 2 voices, and was last updated 2 weeks ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2301932
    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 ๐Ÿ™‚

    #2302150
    David
    Staff
    Customer Support

    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.

    #2302180
    Julia Wegmayr

    Thank you so much, David!
    It works now ๐Ÿ™‚

    #2302181
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.