Create a Full-Width Scrolling Logo Banner

Do you have a bunch of logos on your homepage, making it look a bit too crowded and busy? A convenient way to display them would be by using a scrolling logo banner. There isn’t a native way on Squarespace to create a logo slider on your website. However, there’s a workaround using Classic sections if you’re on version 7.1.

First, you’ll want to create a section using the Classic Editor. You’ll have to scroll all the way down to see this option.

Next, add a Gallery Block to the section you created. Double click on the Gallery Block you created, and use the settings below under the ‘Design’ tab:

• Select ‘Carousel’

• Check ‘Automatically Transition Between Slides’. I like to slide it to 1 second (optional)

• Check ‘Show Next And Previous Controls’ (optional)

Now go back to the ‘Content’ tab and upload your logos.

Go back to your Gallery Block and click it once until the grey dot appears at the bottom. Drag the dot upwards until the logos are at the desired size.

Go ahead and save your changes to add the code in the next step.

Time to add the code. I put comments in the code to show you what each part does, but essentially makes the section full-width and puts a little padding between each logo.

For the code to work, you will have to replace the section’s data-section-id in two different spots. An easy way to find this is by using the Squarespace ID Finder Chrome Extension.

/* Makes Section Full Width */
section[data-section-id="REPLACE-ID-HERE"] {
    overflow-x: hidden !important;
    overflow-y: hidden !important;

    .content-wrapper {
        padding: auto !important;
        margin: 0px auto;
        display: contents;
    }

    .sqs-layout .sqs-row .sqs-block {
        padding-bottom: 0px !important;
        padding-top: 0px !important;
    }
}

/* Adds padding between logos */
.sqs-gallery .thumb-image {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Makes logos bigger on mobile */
@media screen and (max-width:767px) {
    section[data-section-id="REPLACE-ID-HERE"] {
        .sqs-gallery-design-strip {
            height: 230%;
        }

        .sqs-gallery .thumb-image {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }
    }
}

Viola. You have a scrolling logo banner on your website!