Animate Main Nav Logo on Hover

Support
#1

I’d like the logo in my main nav to have a mouseover response, growing slightly and changing color if possible. Is this something I can do by adding custom css or java?

My site url is http://pacify2dev.wpengine.com/

The logo hover effect I want to replicate exists on our current site: https://pacify.com/

Thanks!

#2

Hi there,

Please try this code:

.x-brand:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.x-brand {
    transition: .2s;
}
#3

That did the trick, thank you so much!

One additional question. I would like the “Get in Touch” main nav link to be a pill-shaped button with a background color #5FC9E7 and white text, and a background hover of #C282B8.

I have added the css:

.x-navbar li:last-child a {
background: #5FC9E7;
border-radius: 8.35em;
}

This has changed the background color, but I can’t get it to adhere to the dimensions of the button outline that appears at hover of the other main nav links. Is it possible to custom style this one link? Thank you!

#4

Hi there,

Please try this:

.x-navbar li:last-child a span {
    background: #5FC9E7;
    border-radius: 8.35em;
}
#5

That’s perfect, thank you!

#6

You’re most welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.