Change Logo on a specific page

$0.00

This free code component for Squarespace allows you to show different logos on specific pages, useful for sales pages or matching different page color themes. You can also set a separate logo for mobile views, if needed.

Support

Our free components are not eligible for installation support. If you need assistance, please consider hiring website design experts from our Standout program or purchase a Setup Support Pass.

Attribution

Our free components and licensed for use in unlimited websites. With every use, please credit us by tagging our account (@squarestylist) on social media or linking back to our site. Visit this page for more info.

Get Free Access

Add To Cart

Support

Our free components are not eligible for installation support. If you need assistance, please consider hiring website design experts from our Standout program or purchase a Setup Support Pass.

Attribution

Get Free Access

Support

Our free components are not eligible for installation support. If you need assistance, please consider hiring website design experts from our Standout program or purchase a Setup Support Pass.

Attribution

Get Free Access

Free components can be used in unlimited number of websites. Please provide proper copyright attribution where possible with every use of our components. Learn More

Steps to Implement this Component

To change the logo on one page, simply paste the codes to the Page Settings > Header Code Injection

Change Logo on Desktop

<style>
.header-display-desktop .header-title-logo a::before {
    content: "";
    background-image: url(IMAGE-PATH);
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;//change to center if neede
    position: absolute;
    top: 0;
    left: 0;
}

.header-display-desktop .header-title-logo {
    position: relative;
}
</style>

Youtube walkthrough coming soon

Change Logo on Mobile

<style>

.header-display-mobile .header-title-logo a::before {
    content: "";
    background-image: url(IMAGE-PATH);
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;//change this to center if needed
    position: absolute;
    top: 0;
    left: 0;
}

.header-display-mobile .header-title-logo {
    position: relative;
}




 </style>