Entrance animation for Muffin Header Builder (Sticky Version)
Hi (@Phil if you are available)
I am here again asking questions about some issues I found in the theme. I am using the Muffin Header Builder for my project and I noticed that if I use a custom sticky header, the transition from the normal header and sticky header is not as smooth as when I use the normal header. It will be amazing please if I can add an animation to the transition of the sticky header.
Thank you for your hard work once again! Please let me know if you want to see the example of what I mean.
Comments
Sorry to answer my own question:
I fixed this issue with keyframes under css. I just added the following code:
.mhb-view.desktop.sticky{
animation: fadeIn 1s;
opacity: 1;
}
@keyframes fadeIn {
from {
top: -100px;
opacity: 0.7;
}
to {
top: 0px;
opacity: 1;
}
}
*Depending on the height of your header, you may want to change the value of top: -100px;
**Now depending on how your headers were developed, you may need to hide the default header.
Hello,
I am glad that you resolved it.
Please, let me know if I can help you with anything else.
Thanks