Squarespace Wells模板全端Logo居中（排除左侧侧边栏）实现求助

Got it, let's tackle this logo placement issue in your Wells template. Your original jQuery approach might be conflicting with Squarespace's dynamic rendering or the template's built-in layout rules. Here's a reliable, responsive solution that gets your logo centered in the main page area (outside the left sidebar) across all devices:

Step 1: Hide the Original Sidebar Logo (Optional) #

If you want to remove the logo from the left sidebar entirely, add this to your Custom CSS (Design > Custom CSS):

/* Hide default sidebar logo */
#header .logo {
  display: none !important;
}

Skip this if you want to keep the sidebar logo and just add a second centered one.

Step 2: Add Custom Centered Logo with CSS #

This styles the new logo to stay centered and responsive:

/* Style for centered main content logo */
.custom-centered-logo {
  text-align: center;
  margin: 2.5rem auto; /* Adjust vertical spacing as needed */
  padding: 0 1rem; /* Prevent logo touching screen edges on mobile */
}

.custom-centered-logo img {
  max-width: 220px; /* Set your desired logo width */
  height: auto;
  transition: all 0.3s ease; /* Smooth resize on mobile */
}

/* Mobile responsiveness */
@media screen and (max-width: 767px) {
  .custom-centered-logo {
    margin: 1.5rem auto;
  }
  .custom-centered-logo img {
    max-width: 180px; /* Smaller size for mobile */
  }
}

Step 3: Insert the Logo with JavaScript #

Squarespace loads content dynamically, so we need to wait for the page to fully render before inserting the logo. Add this to Code Injection > Footer (Settings > Advanced > Code Injection):

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Wait for Squarespace's dynamic content to finish loading
  setTimeout(function() {
    // Target the main content wrapper (adjust selector if needed)
    const mainContent = document.querySelector('.content-wrapper');
    if (!mainContent) return;

    // Create your logo element (replace the img src with your actual logo URL)
    const logoElement = `
      <div class="custom-centered-logo">
        <h1 class="logo image">
          <a href="/">
            <img src="//static1.squarespace.com/static/[YOUR-LOGO-FULL-PATH]" alt="Your Site Logo">
          </a>
        </h1>
      </div>
    `;

    // Insert the logo at the top of the main content area
    mainContent.insertAdjacentHTML('afterbegin', logoElement);
  }, 600); // Adjust timeout if needed (increase if logo doesn't load)
});
</script>

Important Notes: #

• Replace [YOUR-LOGO-FULL-PATH] with the actual URL of your logo (upload it to Squarespace Media Library, then copy its direct URL).
• If the .content-wrapper selector doesn't work, try .page-content or inspect your page to find the correct main container class.
• Adjust the CSS values (margin, max-width) to match your site's design aesthetic.

内容的提问来源于stack exchange，提问作者Mr7-itsurdeveloper