FTWSGEM

I had the links showing as visible. I deleted them all and redid one to show.

Hello, For some reason, my social icons seem to have disappeared. The box shows and also changes size/shape to replicate the settings (testing to ensure it was reactive )however, the icons themselves are nowhere to be seen. I want to create a floating social bar on the left of my site but I can't do this when they don't show 😞 Any ideas what I have done wrong? https://dinosaur-horse-8k34.squarespace.com/config/?frameUrl=%2F Pw: notyet

@Jia would you happen to know the code to keep this on a continual loop?

Thank you @tuanphan 🙂

Thank you @Jia amazing!

Thank you, it seems to have stopped the other galleries but also the one I aim to target.

https://dinosaur-horse-8k34.squarespace.com PW: notyet I have a gallery block on my homepage which is a folio of scrolling logos. The code I used is: section[data-section-id="660306201b192a3d5c8ecd97"] { line-height: 2 !important; overflow-x:hidden } .gallery-grid-wrapper { display:flex !important; animation: slideshow 40s linear infinite } .gallery-grid-wrapper .gallery-grid-item { min-width: 20%; margin-right: 5% } @keyframes slideshow { 0% { left: 0; } 100% { left: -125%; } } However, it now seems to be targeting all galleries on the site. I have some not linked pages which have a small gallery on, for example: https://dinosaur-horse-8k34.squarespace.com/ranchroastedcoffee which now also scrolls even though I have added the section ID for the block on the homepage.

//SCROLL ARROW// .arrow{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .arrow span{ display: block; width: 30px; height: 30px; border-bottom: 3px solid #000; border-right: 3px solid #000; transform: rotate(45deg); margin: -10px; animation: animate 1.8s ease infinite; } @keyframes animate { 0%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px); } 50%{ opacity: 1; } 100%{ opacity: 0; transform: rotate(45deg) translate(20px,20px); } } https://dinosaur-horse-8k34.squarespace.com/ PW: notyet

<style> .header-title-logo img { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } </style> I have the above code which works great on inverting the logo, however, I can't find the right code to target the hamburger 😞

This gives me a syntax error 😞

I have implemented a forced custom hamburger which works great. However, on some pages, I need to invert this (along with the logo) to show better. Is it possible when using a custom image? https://dinosaur-horse-8k34.squarespace.com/ranchroastedcoffee Pw: notyet

Thank you so much @Shadmon

@tuanphan is it possible to do this with an image that is not an arrow? I followed the code above and used a drawing of mine (finger pointing down) but there is now no longer any animation to it?

@tuanphan @Ziggy @Shadmon - any ideas guys? Desperate to get this to work 😞

Sorry @tuanphan, https://dinosaur-horse-8k34.squarespace.com/work-1

@Shadmon I have a business plan with the site I am looking to replace. This one is on a trial.

Anyone?

That is perfect, thank you @Shadmon How would I get this to also work for the logo?

@tuanphan @Ziggy Any ideas guys?

I was hoping to add a slide in image on my homepage, just an icon, nothing major. I have got it to work perfectly, however, once I add the code, it removes my scroll bar - so I am assuming there is some bad code stuck in here somewhere. Can anyone help me remove the bug? I really want to use this. In Code Block: <div class="logo fade_in_and_bounce_from_left_leftmost"><img src="https://static1.squarespace.com/static/65e77b1f5c5c900ffc35b502/t/65f9b75e17b31c42a40d7410/1710864222300/SR.png"></div> Added in CSS: // SLIDE IN IMAGE // body { overflow:hidden; } @-webkit-keyframes fade_in_and_bounce_from_left { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { opacity: 1; } } @-moz-keyframes fade_in_and_bounce_from_left { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { opacity: 1; transform: none; } } .logo { width: 100%; margin: 0 auto; text-align: center; } .fade_in_and_bounce_from_left_leftmost { -webkit-animation: fade_in_and_bounce_from_left 2.25s 1; animation: fade_in_and_bounce_from_left 2.25s 1; } .fade_in_and_bounce_from_left_rightmost { -webkit-animation: fade_in_and_bounce_from_left 2s 1; animation: fade_in_and_bounce_from_left 2s 1; } Thanks in advance 🙂

Thank you, but this was buggy for me. The hover was not consistent and I also kept seeing the hand cursor.

I am also interested in this 😊

I have implemented a forced hamburger on desktop and added my own image which I am happy with. However, it would be amazing if I could get it to change colour on hover. I did look at adding a 'change image on hover' but I cannot find a Block ID for it. Any ideas? https://dinosaur-horse-8k34.squarespace.com/ PW: notyet

https://dinosaur-horse-8k34.squarespace.com/config/pages/65f4d07ac3c0660aa798faa4 PW: notyet Thank you @tuanphan

Anyone? 😊