- This topic has 8 replies, 3 voices, and was last updated 5 years, 4 months ago by
.
Hi,
Is there a way to make the header transitions smoother while scrolling down the page – e.g. a fade or bump like on https://jevelin.shufflehound.com/.
Currently, it’s going straight from the header to sticky header and the transition is instant (not smooth etc.).
Thank you!
Hi @peakgraphicz,
I hope you are well today and thank you for your question.
There is a difference between the header transition on the below website and your website because the height of the logo is larger on your website therefore the header height does not change on scroll and remains the same.
https://jevelin.shufflehound.com/header/third-header/
Best regards,
Shufflehound teamHi,
I understand. However, is there a way of creating a transition from the transparent header into the sticky header (e.g. a fade)?
Thanks again.
Solution for this topic
You can create that transition by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .sh-header { transition: background-color 0.5s ease; }Amazing, thank you! Worked perfectly
You are always welcome here 🙂
What about mobile menu transition?
Fix is below:
#page-container .sh-header, #page-container .sh-header-mobile { transition: background-color 0.5s ease; }Awesome great to see you got that fixed.
