MattyT208

Yes! That works great now. Thank you so much.

I added to the bottom of Custom CSS like you suggested. Funny thing is that when I have the Custom CSS window open, the down arrow is centered, but when I close out of the Custom CSS window and refresh that page, the down arrow is once again not centered.

Thank you, that worked great. I'm still learning 🙂

This works. However, how do I limit this so it only applies to a certain page? When I pasted this into Custom CSS window it applied it site-wide. When I pasted it into the particular page Code Injection window, it didn't work. Any suggestions?

Yes, I did. I'm wondering if my custom codes and scripts need to be cleaned up – like maybe I have something in the Page Settings>Advanced window that is conflicting with this as I've added code to that window from other individuals.

I tried this and it's still not working correctly – it did the same thing as before. Do you think there may be conflicting code that I have pasted into the Advanced> Page Header Code Injection for the particular page? The code that is in there is the following: <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> #page section:first-child a.next-section { padding-top: 70px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-block; color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } #page section:first-child a.next-section span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 1.5s 0; animation: sdb05 1.5s 0; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } </style> <script> $(function() { $("#page section:first-child").append('<a href="#" class="next-section"><span></span></a>'); $('a.next-section').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear'); }); }); </script> I don't know if that is causing issues with the code you said to replace in the Custom CSS window, which is this: a.next-section { border: 10px solid rgba(255,255,255,0.5) !important; width: 70px; height: 70px; border-radius: 100%; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; } #page section:first-child a.next-section span { -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); top: calc(~"50% - 5px"); border-color: rgba(255,255,255,0.5); } I hope this makes sense. Thanks.

This worked great at first and then for some reason (minutes later) the arrow began displaying as such (see attachment).

So this did allow me to adjust height, placement, color, etc. but it also added scrolling controls to the right side of the caption boxes – is there a way to get rid of those? See attachment. https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1 PW: yil1TONG4toft*ib

This worked great. Thank you so much.

That worked perfectly, thank you.

https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1 yil1TONG4toft*ib

Both the height and width, if possible.

How do I adjust my drop down arrow to look like Image_1? It currently looks like Image_2. Code injection is currently this: <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> #page section:first-child a.next-section { padding-top: 70px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-block; color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } #page section:first-child a.next-section span { position: absolute; top: 0; left: 50%; width: 28px; height: 28px; margin-left: -12px; border-left: 8px solid #fff; border-bottom: 8px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 0s infinite; animation: sdb05 0s infinite; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } </style> <script> $(function() { $("#page section:first-child").append('<a href="#" class="next-section"><span></span></a>'); $('a.next-section').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear'); }); }); </script>

This worked as far as changing the box color but is there a way to adjust size of caption boxes and also adjust the opacity?

Sorry, I forgot that it was disabled. Please try accessing it again.