Skip to main content

​
Overview

The header component provides the main navigation for the portfolio site. It features a responsive design with a mobile hamburger menu that expands on smaller screens and a full horizontal navigation on desktop.

​
Key Features

  • Responsive mobile-first design
  • Hamburger menu toggle for mobile devices
  • Brand logo and title
  • Main navigation links
  • CTA button (Resume download)
  • Smooth transitions and accessibility features

​
HTML Structure

The header is built with a simple, semantic structure: 
<header class="header">
  <div class="header__brand">
    <img
      class="header__logo"
      src="assets/logo.svg"
      alt="Flora Sheen Portfolio"
    />
    <span class="header__title">Personal</span>
  </div>
  <button aria-label="Toggle Menu" class="header__toggle" aria-expanded="false">
    <img src="assets/toggle.svg" alt="Hamburger Menu" />
  </button>

  <nav class="header__nav">
    <ul>
      <li><a href="#about">About Me</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#projects">Project</a></li>
      <li><a href="#contact">Contact Me</a></li>
    </ul>
  </nav>

  <button class="header__cta" aria-label="Download resume">Resume</button>
</header>

​
CSS Classes

​
Main Container

The main header container uses flexbox for layout:
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-16);
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
}

​
Brand Section

Contains the logo and site title:
.header__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.header__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-black);
}
The navigation is hidden by default on mobile and shown when toggled:
.header__nav,
.header__cta {
  display: none;
}

.header__nav.header__nav--active {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--primary-white);
  padding: var(--spacing-20);
  border-bottom: 2px solid var(--primary-black);
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

​
Responsive Behavior

  • Hamburger menu toggle visible
  • Navigation hidden by default
  • CTA button hidden
  • Menu slides down when toggled
  • Vertical navigation layout
.header__nav.header__nav--active ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  align-items: center;
  font-size: 1.25rem;
  font-weight: 600;
}

​
JavaScript Interaction

The header uses JavaScript for mobile menu toggle functionality: 
const toggleBtn = document.querySelector('.header__toggle');
const nav = document.querySelector('.header__nav');
const navLinks = document.querySelectorAll('.header__nav a');

toggleBtn.addEventListener('click', () => {
  nav.classList.toggle('header__nav--active');
  const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true';
  toggleBtn.setAttribute('aria-expanded', !isExpanded);
});

// Close menu when clicking a link
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    nav.classList.remove('header__nav--active');
    toggleBtn.setAttribute('aria-expanded', 'false');
  });
});

​
Accessibility Features

  • aria-label on toggle button
  • aria-expanded attribute that updates dynamically
  • Semantic HTML with <header> and <nav> elements
  • Proper button elements for interactive components
  • Keyboard-accessible navigation links

​
Implementation Notes

The header is positioned at the top of the page (lines 25-48 in index.html) and uses CSS custom properties for consistent spacing and colors.
The mobile menu toggle requires JavaScript to function. Ensure main.js is loaded at the end of the document.

Build docs developers (and LLMs) love

Get started for freeTalk to us