rwp

That did it, thanks again!
 

.ProductList-filter-list { display: flex; flex-wrap: wrap; justify-content: center; } .ProductList-filter-list-item.ProductList-filter-list-item--all { order: 1; } .ProductList-filter-list-item:nth-child(2) { order: 3; } .ProductList-filter-list-item:nth-child(3) { order: 4; margin: 0; } .ProductList-filter-list-item:nth-child(4) { order: 2; margin-right: 15px; }  

It should work. Is the site 7.1?
Click the link in my signature. Click the codepen link on my page.
There should be a pen called Scroll to products on cat change.
See if that works.
Don't forget to follow the instructions in my signature for setting up jQuery.

I haven't tested it on 7.0
Let me know if it works, if not, we can modify it.

@CptFeeny Sent you a message.

This worked! Thank you so much man!

.header-menu-nav-item a { padding: 0; font-size: 1em; } Adjust numbers as needed

Problem solved…
Thank you, RWP!

You need to publish it after uploading.
https://support.squarespace.com/hc/en-us/articles/206543047-Gallery-Pages#toc-set-the-item-s-publication-status

Use HTML
<a href="#anchor">Link</a>

@media screen and (max-width: 639px){ #pitch { min-height: unset !important; } #block-yui_3_17_2_1_1559189131342_7573 { padding: 0 !important; } #block-c6a5be37ddcf5791e077 { padding-top: 0 !important; } #biotease { margin-top: -17px; } }  

I just added a new plugin for this to my webpage.
If the screen is wider than 640px, it will delay the fallback image from being visible for 4 seconds.
This way, if the video doesn't load for some reason, the image will show.
https://ultraoutlook.com/

@tuanphan I used your code to make it a button to scroll to the next section. Save this for later when others need it.
https://jsfiddle.net/pelletr1/ae1o3qzg/10/

Add to Code Block
<div class="scroll-down"></div> <style> .scroll-down { position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 13px; height: 13px; border-bottom: 2px solid red; border-right: 2px solid red; z-index: 9; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(45deg); -moz-transform: translate(-50%, 0%) rotate(45deg); transform: translate(-50%, 0%) rotate(45deg); -webkit-animation: fade_move_down 4s ease-in-out infinite; -moz-animation: fade_move_down 4s ease-in-out infinite; animation: fade_move_down 4s ease-in-out infinite; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } } </style>  

Try putting the jQuery code above the code in the header injection block.

jQuery url is incorrect.  Needs to be https://
Use the link in my signature to generate a new script block and replace.

Your script tag is incorrect for the jquery file.
You also need to replace blank.gif with a url to a blank image.

 

Amazing! Thank you thank you thank you for helping with this odd issue - now we see a bit of grey before the video instead of the mobile fallback flashing for half a second. Awesome.
 
 

So my thoughts are that the code is running before the fallback image is actually generated, so lets try this.....
We can also get rid of the blank image, I should have thought of that earlier.
Replace the old code that I gave you with this, keep the script tags, keep the jquery script, just replace whats in yellow.......
$(document).ready(function () { $('.custom-fallback-image').attr('style', 'display: none'); setTimeout(function () { $('.custom-fallback-image').attr('style', 'display: block'); }, 4000); });  

this one works great! Thanks alot

I've had this saved for a while, I don't even remember where I got it.
I've changed and tweaked it a bunch of times, and I have never really spent the time to get it 100% right.
I just added the svg from your code to it, and it looks a lot better.
Try it out, let me know what you think.
https://jsfiddle.net/pelletr1/h904prbz/latest/
Edit: I just plugged it all into your page from the console and it seems to work

If you share your page I can get the actual code, but it will be something like
#collection #header { position: fixed; }  

Thanks so much rwp! This put me on the right path.

I found the collection-id for that specific page. 

This is the end result that worked just great.
#collection-5ef47e01a0680c5b1a28ecac #header {   position: fixed !important;   z-index: 1000; //in case it scrolls behind certain elements further down.   background: #df4430; //because header was transparent. }  

Tested the code. Worked perfectly! ✌️

Sent a PM, sounds exciting !