(Squarespace) How to add a countdown timer to header navigation

[tuanphan]

To add a countdown timer to Header Navigation, like this

#1 . First, use this code to Code Injection > Footer

You can also use this free tool to create Countdown Timer without using complex code.

<script>
const targetDate = new Date('2026-09-17T17:50:00');
function updateCountdown() {
  const daysEl = document.getElementById('days');
  const hoursEl = document.getElementById('hours');
  const minutesEl = document.getElementById('minutes');
  
  if (!daysEl || !hoursEl || !minutesEl) return;
  
  const now = new Date();
  const difference = targetDate - now;
  
  if (difference > 0) {
    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
    const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    
    daysEl.textContent = days;
    hoursEl.textContent = hours;
    minutesEl.textContent = minutes;
  } else {
    daysEl.textContent = '0';
    hoursEl.textContent = '0';
    minutesEl.textContent = '0';
  }
}
setTimeout(function() {
  const nav = document.querySelector('nav.header-nav-list');
  if (nav && !document.querySelector('.countdown-container')) {
    const countdownHtml = `
      <div class="countdown-container">
        <div class="countdown-item">
          <div class="countdown-number" id="days">0</div>
          <div class="countdown-label">days</div>
        </div>
        <div class="countdown-item">
          <div class="countdown-number" id="hours">0</div>
          <div class="countdown-label">hrs</div>
        </div>
        <div class="countdown-item">
          <div class="countdown-number" id="minutes">0</div>
          <div class="countdown-label">mins</div>
        </div>
      </div>
    `;
    nav.insertAdjacentHTML('afterend', countdownHtml);
    
    setTimeout(function() {
      updateCountdown();
      setInterval(updateCountdown, 60000);
    }, 100);
  }
}, 1000);
</script>

#2. Use this code to Custom CSS

/* Countdown Timer in Nav bar */
  .header-nav-wrapper {
    display: flex;
    flex-direction:row-reverse;
    align-items: center;
    justify-content: flex-start;
}
.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 10px;
  color: #000;
}
.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 10px;
  border-radius: 8px;
  min-width: 70px;
}
.countdown-number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #000;
}
.countdown-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
  color: #000;
}

#3. You can adjust Date here.

You can adjust text here