Hero section logo to navigation | Squarespace 7.1
Use CSS and javascript TO ADD A LINE OR ANY OTHER TEXT
Go to Settings:
In your Squarespace dashboard, go to Website > Pages > Website Tools > Custom CSS.
Add Custom CSS:
/* Logo - Starting in Hero Section */
.header-title-logo img {
position: absolute;
top: 800px; /* Starting position in the hero section */
left: 50%; /* Centered horizontally */
transform: translate(-50%, 0) scale(4); /* Larger size in hero section */
transition: all 0.9s ease; /* Smooth movement */
z-index: 2; /* Above other elements */
}
/* Logo - Moving to Navigation Bar */
.shrink .header-title-logo img {
position: fixed; /* Fix to viewport while scrolling */
top: 0px; /* Final position in the navigation bar (adjust as needed) */
transform: translate(-50%, 0) scale(1); /* Shrink to normal size */
z-index: 3; /* Above other elements */
}
3. ADD JAVASCRIPT TO THE HEADER:
Go to Website > Pages > Website Tools > Code Injection.
<script>
document.addEventListener('DOMContentLoaded', function () {
const header = document.querySelector('.header'); // Navigation container
const logo = document.querySelector('.header-title-logo img'); // Logo
const heroHeight = window.innerHeight; // Full height of the hero section
let logoShrunk = false; // Flag to track the logo's state
window.addEventListener('scroll', function () {
const scrollY = window.scrollY;
if (scrollY > heroHeight / 2 && !logoShrunk) {
// Once the logo has not shrunk yet and user scrolls down
header.classList.add('shrink'); // Add shrink class
logoShrunk = true; // Set flag to true
} else if (scrollY <= heroHeight / 2 && logoShrunk) {
// If the scroll is above half and logo has already shrunk
header.classList.remove('shrink'); // Reset shrink class (if needed)
logoShrunk = false; // Reset flag
}
});
});
</script>
