-
Posts
-
Hello,
with your header tutorial and forum posts I could archive the need of my client to have a transparent header on mobile and after scroll it turns into a white background header – all that is good.
My client now feels that it is a bug how the white menu bar appears – he does not want the fade-in animation after scroll, instead it should seamleass switch from transparent to visible header in a snap, directly after scroll, no delay.
Can you please help me with a custom css or JS to disable the animation on mobile that animates in the white background header bar instead of the transparent bar?
Here is a video of the current behavior: https://www.horakexecutivesearch.de/RPReplay_Final1611039929.MP4.
Again, the animation after scrolling that shows the white background bar should be gone, it should be shown immediately after scroll without effect.
Thank you very much!
Hey,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
.header_bg { -webkit-transition: none; transition: none; }Best regards,
YigitHello Yigit, Thank you! This works perfect now on desktop – on mobile still the same for me, even without cache.
Hi,
It seems like you have removed the code. If you have not, could you please create temporary admin logins and post them here privately so we can look into it? :)
Best regards,
YigitHi,
There were couple of errors in your custom CSS code in media queries. I fixed them and checked once again and confirmed that it is now working fine on mobile as well.
Please review your website :)Best regards,
YigitI am sorry, but my collegue was working in Customizer and I guess we have overwritten.
We are OUT now, can you please do it one more time…
SORRY.
Hi,
This time there was 1 error only I fixed it and attached current custom CSS code in private content field :)
Best regards,
YigitThank you very much!
But still, when I scroll on smartphone (or everywhere else), the white header bar comes in with an effect like fade-in but it should show without delay and effevt. Deleted cache
Hi,
I checked customizer once again but there is no error. I disabled CSS file merging and compression in Enfold theme options > Performance tab, saved theme options, cleared cache and minified files, enabled CSS file merging and compression and saved theme options again.
Then, I created the screencast I attached in private content field below.
Please make sure to clear cache on your mobile browser as well :)Best regards,
YigitDear Yigit,
Thank you for your effort and help! Very great!
My client just wrote:
“isn’t technically possible to leave the logo/selection icon where it is over the image when scrolling like in the desktop version and only “switch” between the visual modes (transparent to white background)?Right now I think it looks nice, my client does not. He would simply like the same behaviour as on desktop.
Can you please one more time think about a way?
On desktop the logo and burger on transparent is NOT moving. This is how my client would like it. So if we could manage to make the logo and burger fixed while scrolling, same as on desktop, it should be fine.
Thank you!
Hi,
I changed following code in Customizer
/* Transparent header on mobile */ @media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency { background: transparent; position: absolute!important; }}to following one
/* Transparent header on mobile */ @media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency { background: transparent; }}Please review your website :)
Best regards,
YigitHi,
You are welcome! :)
For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/
If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)
Enjoy the rest of your day!
Best regards,
Yigit
- The topic ‘Please help, remove "animation" on mobile before sticky header’ is closed to new replies.