Frontpage Header Image Animation not working

Multipurpose WordPress Theme Forum Support
GK User
Tue May 23, 2017 10:32 am
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!
User avatar
Senior Boarder

Joshua M
Wed May 24, 2017 8:00 am
Hi,
I can't see the issue on your website - it's the same header animation like on our demo.. is it already resolved?
User avatar
Moderator

GK User
Thu May 25, 2017 10:01 pm
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.
User avatar
Senior Boarder

Joshua M
Fri May 26, 2017 8:51 am
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?
User avatar
Moderator

GK User
Sun Jun 04, 2017 7:29 pm
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/
User avatar
Senior Boarder

Joshua M
Mon Jun 05, 2017 8:33 am
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.
User avatar
Moderator

GK User
Tue Jun 06, 2017 9:56 am
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?
User avatar
Senior Boarder

GK User
Tue Jun 06, 2017 9:57 am
Oh and how can I hyperlink the image to go to the store page? Thanks!
User avatar
Senior Boarder

Joshua M
Wed Jun 07, 2017 6:58 am
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;
}
User avatar
Moderator

GK User
Thu Jun 08, 2017 12:51 pm
Thank you! This worked great for linking and getting the image to be the size that we need. We really appreciate the help!
User avatar
Senior Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.