Entrance animation for Muffin Header Builder (Sticky Version)

manager-teamq

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.

manager-teamq

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.

Phil

Hello,

I am glad that you resolved it.

Please, let me know if I can help you with anything else.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next