AshleyThomas

On 4/18/2022 at 7:36 AM, tuanphan said:

With services item, try edit services text with this code

<em>S</em><em>e</em><em>r</em><em>v</em><em>i</em><em>c</em><em>e</em><em>s</em>
      

Next, add this to Design > Custom CSS

div.header-nav-item a em {
    animation-direction: reverse !important;
    font-style: normal;
}

div.header-nav-item a em:nth-of-type(1) {
    animation-delay: .1s !important;
}

div.header-nav-item a em:nth-of-type(2) {
    animation-delay: .15s;
}

div.header-nav-item a em:nth-of-type(3) {
    animation-delay: .2s;
}

div.header-nav-item a em:nth-of-type(4) {
    animation-delay: .25s;
}

div.header-nav-item a em:nth-of-type(5) {
    animation-delay: .3s;
}

div.header-nav-item a:hover em {
    animation: jumb 0.5s !important;
    -webkit-animation: jumb 0.5s !important;
    animation-iteration-count: 1;
}

@keyframes jumb {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }

    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

@-webkit-keyframes jumb {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }

    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }
}

 

Hey! Thank you for this! I am unable to edit the "Services" as it's a header item, so I can't use the <em> part.  

Try adding !important to the mobile query: 

@media screen and (max-width:767px) {
h4 {
    line-height: 1em!important;
}
}

Yes, that's the one! 

Site URL: https://ruby-herring-z3b2.squarespace.com/

Hi everyone! 

I have been trying to solve this problem for weeks now with no luck. I know the answer is going to be relatively obvious, but so far, nothing. 

I would like for the navigation on the site below to have the same hover animation as the main navigation as this site. (Wavy)

https://ruby-herring-z3b2.squarespace.com/

password: summersidenew

I have tried: 

Javascript and CSS animations (with no luck) but I know it's because I am just missing SOMETHING.