Day 08: Day 08: Navigation & Footer | 26to26 - 26 days from concept to launch

Today we implemented the site-wide navigation and footer components with a strategic twist: context-aware behavior that adapts to each page’s primary goal. Rather than forcing a one-size-fits-all approach, we let the navigation and footer serve the user’s journey at each stage.

The Strategic Decisions

On the homepage (/), we treat the page as a landing page for potential clients. The entire flow is designed to guide visitors toward one action: taking the assessment.

What we did:

Hide the main footer content (navigation links, contact section, tagline)
Show only the minimal footer with copyright and email
Keep the ClosingCTA section as the dominant ending

Why it matters: The homepage ends with a strong call-to-action section. Adding a full footer with multiple navigation options would dilute that focus and give users too many exit points. By keeping only essential legal/contact info in a minimal footer, we maintain the CTA’s prominence while still providing necessary trust signals.

// Landing-page / results behavior: keep CTA feeling like the "final cut"
// without removing trust/legal signals site-wide.
const isMinimalFooter = currentPath === '/' || currentPath.startsWith('/results');

On the assessment page (/assessment), users are in a focused flow. They’re answering questions, and we don’t want to distract them with navigation options.

What we did:

Remove all navigation links from the header
Show only the logo (which links back to home if needed)
Use transparent header background (no glass panel)

Why it matters: When someone is filling out an assessment, every navigation link is a potential exit point. By removing navigation, we reduce cognitive load and help users complete the flow. The logo remains as a subtle escape hatch if they truly want to leave, but we’re not actively encouraging it.

// Pages where we want minimal chrome (logo only)
const isMinimalHeader = currentPath === '/assessment' || currentPath.startsWith('/results');

3. Results Pages: Minimal Everything

Results pages (/results/*) combine both strategies:

Header: Logo only, no navigation (same reasoning as assessment)
Footer: Minimal footer with just email and copyright

Why it matters: Results pages are the culmination of the assessment journey. Users have invested time answering questions and now they’re reading personalized recommendations. The page ends with a strong CTA to book a call or reach out. Adding full navigation or footer would:

Distract from the recommendations
Dilute the final CTA
Give users too many ways to leave before taking action

We want the results page to feel like a complete, focused experience that naturally leads to the next step: contacting us.

    <!-- Bottom Bar -->
    <div class="footer-bottom">
      <p class="copyright">
        &copy; {new Date().getFullYear()} Shika Digital
      </p>
      {isMinimalFooter ? (
        <a href="mailto:[email protected]" class="footer-link footer-bottomEmail">
          [email protected]
        </a>
      ) : (
        <p class="footer-craft">Crafted with intention</p>
      )}
    </div>

For all other pages (about, blog posts, general content), we show the full header and footer with:

Complete navigation menu (desktop and mobile)
Full footer with logo, tagline, navigation links, and contact section
All trust signals and site-wide elements

Why it matters: On informational pages, users are exploring and learning. They need navigation to move around the site freely. There’s no single conversion goal, so we provide full site chrome to support exploration.

Design Uncertainty: Header & Navigation

While we’re confident about the strategic behavior (when to show/hide elements), we’re not fully satisfied with the visual design of the header and navigation yet.

Current approach:

Glass morphism effect with backdrop blur
Teal accent underlines on hover/active states
Responsive mobile menu
Color adaptation based on page background (dark vs light)

What feels off: The glass effect and overall aesthetic feel a bit generic. It works functionally, but it doesn’t feel as distinctive as other parts of the site. We may revisit this in a future iteration to:

Explore more unique navigation patterns
Refine the visual treatment
Test different interaction models

For now, it’s good enough to ship, but marked as an area for future improvement.

Technical Implementation

Header Component

The header uses a data-minimal attribute to control its behavior:

<header
  class="site-header"
  data-dark-start={isDarkStart ? 'true' : 'false'}
  data-minimal={isMinimalHeader ? 'true' : 'false'}
>
  <div class="header-inner">

When data-minimal="true":

Background becomes transparent
Border and shadow are removed
Navigation links are hidden
Only logo remains

  /* Minimal header mode (Assessment + Results): logo only, no glass panel
     NOTE: must come AFTER dark/light/scrolled variants so it can't be overridden. */
  .site-header[data-minimal="true"] {
    background: transparent !important;
    color: var(--color-black) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header[data-minimal="true"]::before {
    display: none !important;
  }

  .site-header[data-minimal="true"] .logo {
    filter: none !important;
  }

The footer uses conditional rendering to show/hide sections:

<footer class={`site-footer ${isMinimalFooter ? 'site-footer--minimal' : ''}`}>
  <div class="sd-container" style="--sd-container-max: 1200px">
    {isMinimalFooter
      ? null
      : (
          <>
            <!-- Brand Row: Full width, asymmetric left alignment -->
            <div class="footer-brand-row scroll-reveal">
              <a href="/" class="footer-logo-link" aria-label="Shika Digital Home">
                <img
                  src="/images/logo/shika-horizontal.svg"
                  alt="Shika Digital"
                  class="footer-logo"
                  width="200"
                  height="56"
                />
              </a>
              <p class="footer-tagline">
                <span class="footer-tagline-values">Speed. Honesty. Finishing. Plain language.</span>
              </p>
            </div>

            <!-- Content Row: Asymmetric 60/40 split -->
            <div class="footer-content scroll-reveal-stagger">
              <!-- Navigation Column (wider) -->
              <nav class="footer-nav" aria-label="Footer navigation">
                <span class="footer-section-label">Navigate</span>
                <ul class="footer-navList">
                  {NAV_LINKS.map((link, index) => (
                    <li class="footer-navItem" style={`--link-index: ${index}`}>
                      <a href={link.href} class="footer-link footer-navLink">{link.label}</a>
                    </li>
                  ))}
                </ul>
              </nav>

              <!-- Contact Column (narrower, right-aligned) -->
              <div class="footer-contact-col">
                <span class="footer-section-label">Get in touch</span>
                <a href="mailto:[email protected]" class="footer-email-cta">
                  <span class="footer-email-text">[email protected]</span>
                  <span class="footer-email-arrow" aria-hidden="true">→</span>
                </a>
                <p class="footer-location-info">Based in Tokyo, Japan</p>
              </div>
            </div>
          </>
        )}

    <!-- Bottom Bar -->
    <div class="footer-bottom">
      <p class="copyright">
        &copy; {new Date().getFullYear()} Shika Digital
      </p>
      {isMinimalFooter ? (
        <a href="mailto:[email protected]" class="footer-link footer-bottomEmail">
          [email protected]
        </a>
      ) : (
        <p class="footer-craft">Crafted with intention</p>
      )}
    </div>
  </div>
</footer>

When isMinimalFooter is true:

Brand row is hidden
Navigation and contact sections are hidden
Only bottom bar remains with copyright and email link
Decorative elements (border, gradients) are removed

Design Details

When showing the full footer, we implemented several distinctive design elements:

Asymmetric Layout:

Brand row spans full width on mobile, splits asymmetrically on desktop
Content row uses 60/40 grid split (navigation wider, contact narrower)
Right-aligned contact section for visual interest

Bold Typography:

Tagline uses weight 900 with yellow accent color
Extreme weight contrast between labels (600) and values (900)
Section labels use uppercase with generous letter-spacing

Substantial Email CTA:

Email link styled as a prominent button with teal border
Hover effect with lift animation and glow
Arrow indicator that slides on hover

Atmospheric Background:

Dual radial gradients (teal and yellow) on black base
Geometric grain texture overlay
Yellow accent border at top (15% width on left)

Scroll Reveal Animations:

Staggered entrance for navigation items
Fade-up animations for major sections
Respects prefers-reduced-motion

For mobile devices, we implemented a hamburger menu with:

React component for interactivity
Slide-in panel animation
Full-screen overlay
Touch-friendly targets (44px minimum)

The mobile menu appears on screens below 768px width and is hidden on desktop where we show inline navigation links.

Accessibility Considerations

Throughout the implementation, we maintained strong accessibility:

Keyboard Navigation:

All interactive elements are keyboard accessible
Clear focus-visible states with teal outline
Logical tab order

Screen Readers:

Semantic HTML (<nav>, <header>, <footer>)
ARIA labels for icon buttons and logo links
aria-current="page" for active navigation items
aria-hidden="true" for decorative elements

Touch Targets:

Minimum 44×44px touch targets on all interactive elements
Adequate spacing between links
Large click areas for mobile menu

Motion:

All animations respect prefers-reduced-motion
Fallback to instant display when motion is reduced
No critical functionality depends on animation

What We Learned

1. Context Matters More Than Consistency

Traditional web design wisdom says “be consistent everywhere.” But we learned that strategic inconsistency can better serve user goals. The homepage needs different chrome than the assessment page, and that’s okay.

2. Minimal ≠ Missing

A minimal footer doesn’t mean no footer. We still provide essential trust signals (copyright, contact email) even in minimal mode. It’s about prioritizing, not removing.

3. Design Confidence Takes Time

We shipped the header/navigation even though we’re not 100% satisfied with the visual design. Sometimes “good enough to ship” is the right call, especially when you can iterate later. Perfect is the enemy of done.

4. Component Flexibility

Building components with conditional behavior from the start makes them more powerful. The Header and Footer components work across all pages with just a few boolean flags, rather than needing separate components for each context.

Day 08: Navigation & Footer

The Strategic Decisions

1. Homepage: CTA-First, Footer-Minimal

2. Assessment Page: Logo Only, No Navigation

3. Results Pages: Minimal Everything

4. Other Pages: Full Navigation & Footer