Is it possible to restrict a CSS/HTML animation to a single section?
Hi all,
I've been having some trouble with a custom header animation for a client for a while now. I've almost cracked it, but I'm having an issue where the html/css animation overflows into the next section (or sometimes leaves a large gap/whitespace depending on screen size).
Whilst I understand that CSS customisation falls outside of the scope of the support offered by yourselves, I was hoping that there would be a way that BeTheme itself can contain this animation within a section meaning it won't overflow, or leave a gap, into the next one.
The test page I have for this can be found here: https://amici.art/tester-home/
The section at the top is a custom header made by yourselves for the purpose of having the menu bar appear after the scroll, which may be the cause as the header isn't itself built on the page, but is instead a template.
Any help with this would be massively appreciated as I'm already behind schedule with this project as I have tried almost every method I know.
Many thanks,
Joe
Comments
Hi,
I doubt that I will be able to provide you with a suitable solution.
However, if you can attach screenshots showing your problem, I can check that. At the moment, I do not know what gap or overflow you refer to.
Thanks
Hi Phil,
I've recorded a short video showing the issue I'm having. Basically I just want the custom header to stop scrolling once the animation has concluded and for the first "real" section on the page to appear underneath it without leaving a gap or having the custom header overlapping.
https://vento.so/view/8a48c8a8-cfbc-4c73-90c1-4e6dd660a40c?utm_medium=share
Thanks in advance
Unfortunately, I am not able to help you with that.
You should contact a web developer specialist to make customization for you.
Best regards
Ok, no problem. Thanks for looking into it.
I've contacted the developer who made the animation and he's provided a fix - However this only seems to work as a plain text element in its own section on the page (as opposed to using a custom header).
I was wondering if there was a way at all to have this section appear over the top of the sticky menu bar? The bar appears at the top on the scroll (as it's supposed to), but I was hoping there was a way that I could cover the bar with this animation section and then have it appear as the visitor scrolls past - this is something my client has specified they'd like to happen, so I'm hoping there is a way to do this. Maybe adding css that targets the sticky menu to adjust its z-index (although I've tried this already with no luck).
Thanks in advance!
(The test page can now be found at: https://amici.art/tester-home-476/)
Sorry, but there is no option for that, unfortunately.
Best regards