Squarespace双语站点导航栏Logo替换后恢复首页链接方法咨询

Hey there, let's tackle this issue where your CSS-replaced French logo lost its homepage link. The problem with using content: url() on the h1.logo element is that while it swaps the visual logo, it doesn't preserve or update the underlying hyperlink structure—plus CSS can't modify a link's href attribute directly. Here are two reliable solutions:

Solution 1: Adjust CSS + Update Link Target (With a Little JS Help) #

First, let's make sure the existing link container stays functional, then tweak the styling to show your French logo. Assuming your site's logo DOM structure looks something like this (common in Squarespace):

<a href="/" class="site-title-logo-link">
  <h1 class="logo"></h1>
</a>

1. Update your CSS to hide the original logo content and use the French logo as a background on the link container:

/* Hide the default h1 logo content but keep its dimensions */
h1.logo {
  visibility: hidden;
  width: 150px; /* Replace with your French logo's actual width */
  height: 50px; /* Replace with your French logo's actual height */
}

/* Apply French logo to the link container */
.site-title-logo-link {
  background: url("url_of_french_logo") no-repeat center center;
  background-size: contain;
  display: inline-block;
  width: 150px; /* Match logo width */
  height: 50px; /* Match logo height */
}

2. Add a small JS snippet to change the link's target to your French homepage (since CSS can't modify href):

document.addEventListener('DOMContentLoaded', function() {
  const logoLink = document.querySelector('.site-title-logo-link');
  if (logoLink) {
    logoLink.href = '/fr'; // Replace with your actual French homepage path
  }
});

Solution 2: Full JS Replacement (More Reliable for Dynamic Sites) #

If you want a one-stop fix that replaces both the logo and updates the link in one go, use this JS snippet instead of your original CSS:

document.addEventListener('DOMContentLoaded', function() {
  // Target the logo link and logo element (adjust selectors if needed)
  const logoLink = document.querySelector('.site-title-logo-link');
  const logoH1 = document.querySelector('h1.logo');

  if (logoLink && logoH1) {
    // Update link to point to French homepage
    logoLink.href = '/fr';
    // Replace the logo with your French version
    logoH1.style.content = ''; // Clear original CSS content
    logoH1.style.backgroundImage = 'url("url_of_french_logo")';
    logoH1.style.backgroundSize = 'contain';
    logoH1.style.backgroundRepeat = 'no-repeat';
    logoH1.style.width = '150px'; // Match your logo's width
    logoH1.style.height = '50px'; // Match your logo's height
  }
});

How to Add This to Squarespace: #

• Go to your Squarespace dashboard
• Navigate to Settings > Advanced > Code Injection
• Paste the JS snippet into the Header section
• Save your changes

This approach keeps the logo clickable and ensures it points directly to your French homepage without breaking the site's native structure.

内容的提问来源于stack exchange，提问作者paulcook