Frontpage Header Image Animation not working

I've double checked my code and done our frontpage header image just as your documentation says, but I still am not seeing the dropdown animation take place of the image on the right hand side. Why is it not working so the cartoon (our image), drops down from the top, like your demo shoes of the yellow shoe?

Here is the site: https://shop.studiotrujillo.com/.

Thanks!

Hi,
I can't see the issue on your website - it's the same header animation like on our demo.. is it already resolved?

I still don't see it animating for us. So it is not resolved. I'm using Google Chrome.
I have another topic posted where you asked for credentials to log in - perhaps once in, you can see about this issue as well. I'll PM you. Thanks.

The issue with the slider is resolved, but still can't see the issue with the header (I'm using Chrome also), could you provide a screenshot from our demo website where you see this animation?

It's the large yellow shoe on the Quark E-Commerce frontpage that on the demo I've see animated to drop in from the top. And now, I'm seeing that the image I've placed in our site is being shrunk down - can you please tell me how to allow for our image to be full-size or at least bigger? I have the same html code as what came with the demo and is in your documentation, yet I can see when I inspect the code, that it's telling it a max-width of 40% and width of 40% - I go to change it with CSS and it increases it too much. I just want it to be it's true size which we got from looking at your demo. https://shop.studiotrujillo.com/

Try to add the following custom css code:

Code: Select all

body #gk-header-mod .gk-store-image > img {
    height: auto !important;
    width: 100% !important;
}


and crop your image to remove empty space on the top.

Ok, I did that, but we added a new image that is 600x1000px so there is no empty space on the top. But within the Page's html, I change this <div class="gk-store-image" data-sr="enter top and move 50px scale up 20% and wait .25s"> regarding the 50px to something bigger or even the % and it seems to make no change at all - even after I clear my browser - why are these adjustments not doing anything?

Oh and how can I hyperlink the image to go to the store page? Thanks!

I can't see mentioned css code from my last answer, regarding the hyperlink - you can add <a href="YOur_URL">your image code</a>
to your header source page, but you'll have to add also this css code:

Code: Select all

.gk-store-image img {
    left: 0;
    position: static !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    width: 80% !important;
}


Thank you! This worked great for linking and getting the image to be the size that we need. We really appreciate the help!