Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #720268

    Hello,

    I have been trying to add a hover for the logo but haven’t been able to figure it out. I want it to be a black version of the logo when it hovers. I added the standard logo and black logo to the uploader if that help.

    Thanks

    • This topic was modified 7 years, 3 months ago by justinsearl.
    #720534

    Hey justinsearl,

    I have added this code in your Quick CSS (located in Enfold > General Styling):

    #header .logo a {
        position: relative;
    }
    
    #header .logo a:after {
        background: url("https://yourdomain.com/wp-content/uploads/2016/12/logo_hover.png") left top no-repeat;
        background-size: auto 100%;
        content: "";
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        opacity: 0;
        filter: alpha(opacity=0);
        visibility: hidden;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    #header .logo a:hover:after {
        opacity: 1;
        filter: alpha(opacity=100);
        visibility: visible;
    }

    Let us know if it’s good on your end :)

    Best regards,
    Nikko

    #720746

    You Rock!!!!

    This is great. It might be the photos I uploaded on my end but the black logo shifts up a little when hovering. How can I change the images so I can go in and upload a new one?

    Thanks,
    J

    #720752

    Hi J,

    Just adjust the hover image then re-upload again, then you will see this in the code I have given http://yourdomain.com/wp-content/uploads/2016/12/logo_hover.png just replace it with the url of the new image.

    Best regards,
    Nikko

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.