Changing Site Logo in Super.so

Displaying your branding logo is an important feature for any website. Super allows you to easily customize this using either text or an image.

To add or update your logo:

Go to the Navigation section in your site settings.
Scroll to the bottom and click Manage Menu Logo.

Choose how you want to display your logo:

Text: Enter your brand name or initials.
Image: Upload your logo file.

Click Save Changes to apply your updates.

If you’d like to redirect your logo to a different page, you can easily do this by adding the script below to your CODE > BODY section. This ensures that your logo will always navigate to the correct page.

<script>
(function () {
  const targetUrl = 'https://yourdomain.com';

  // Click handler for logo
  const logoOnClick = (e) => {
    e.preventDefault();
    window.location.href = targetUrl;
  };

  // Attach event listener to logo
  const attachEventListenerToLogo = () => {
    const logo = document.querySelector('a.super-navbar__logo');
    if (logo) {
      logo.removeEventListener('click', logoOnClick);
      logo.addEventListener('click', logoOnClick);
      logo.href = targetUrl; // ensure href is updated
    }
  };

  // Run on initial load
  const runFunctions = () => attachEventListenerToLogo();

  // Handle route changes (Super.so SPA)
  const initializeRouteChangeHandler = () => {
    if (window.events && window.events.on) {
      window.events.on('routeChangeComplete', runFunctions);
    } else {
      window.addEventListener('popstate', runFunctions); // fallback
    }
  };

  // Initial setup
  const initialSetup = () => {
    runFunctions();
    initializeRouteChangeHandler();
  };

  // DOM ready check
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    setTimeout(initialSetup, 50);
  } else {
    document.addEventListener('DOMContentLoaded', initialSetup);
  }
})();
</script>