Smooth animation for centered logo

[tomaspernek]

Hi there!

I contacted you in may regarding a menu with centered logo and got really quick help, thank you! So I have managed to get the logo centered and thanks to other forum threads I have made it “change shape” as well using this css

.x-masthead .x-image img {
margin: auto;
transition: all 0.9s ease-in-out;
}

.x-masthead .x-bar-fixed .x-image img {
margin-top: -88px;
box-shadow: none;
transition: all 0.9s ease-in-out;
}

What I can not seem to get right is the animation between the two, I would like for it to have a smooth movement not just jump between the two as it is doing now. Any suggestions?

Best

/Tomas

[thai]

Hi Tomas,

I would like to check your website but it’s under protected password.

Could you please provide us with the password?

Thank you.

[tomaspernek]

Hello! Please find the password below

[ruenel]

Hello There,

To resolve your issue, please update your css code and use this instead:

.x-masthead .x-image img {
    margin-top: 0;
    transition: margin-top 1s linear;
}

.x-masthead .x-bar-fixed .x-image img {
    margin-top: -88px;
    box-shadow: none;
    transition: margin-top 1s linear;
}

We would loved to know if this has work for you. Thank you.

[tomaspernek]

Wow, this worked out very well! Just had to adjust the time to 0.08s to give the animation a good feel.

Thank you so much for great and super fast support!

/Tomas

[rad]

You’re most welcome!