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>