Navigation Structure

Proyecto Neptuno features a consistent navigation pattern across all pages, with a responsive hamburger menu for mobile devices. The entire system is built with pure HTML and CSS — no JavaScript required.

Header Structure

The header is identical across all 5 pages, ensuring consistent navigation:

<header>
    <div>
        <a href="./index.html"><img src="./img/logo.png" alt="Logo CC Neptuno"></a>
    </div>

    <input type="checkbox" id="btn-menu">
    <label for="btn-menu" class="hamburger">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </label>

    <nav>
        <ul>
            <li><a href="./index.html">Inicio</a></li>
            <li><a href="./ocio.html">Ocio</a></li>
            <li><a href="./gastro.html">Gastronomía</a></li>
            <li><a href="./proyecto.html">El Proyecto</a></li>
            <li><a href="./contact.html">Contacto</a></li>
        </ul>
    </nav>
</header>

Header Components

Logo

Clickable logo linking back to homepage

Hamburger Toggle

Mobile menu trigger (hidden on desktop)

CSS Implementation

On desktop screens, the header uses flexbox for horizontal layout:

header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    width: 100%;
    padding: 1rem 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--bg-principal);
    height: 10vh;
    border-bottom: 1px solid #e0e0e0;
}

header nav {
    width: 70%;
}

header ul { 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header li {
    list-style: none;
}

header a {
    text-decoration: none;
    color: black;
}

Key Features:

position: sticky keeps header visible on scroll
z-index: 1000 ensures it stays above content
Flexbox distributes links evenly
Bottom border provides subtle separation

The hamburger menu uses a checkbox hack for CSS-only interaction:

HTML Structure
CSS - Checkbox
CSS - Hamburger Icon
CSS - Mobile Menu

<!-- Hidden checkbox controls menu state -->
<input type="checkbox" id="btn-menu">

<!-- Label acts as the clickable hamburger icon -->
<label for="btn-menu" class="hamburger">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
</label>

<!-- Navigation menu (slides in when checkbox is checked) -->
<nav>
    <ul>
        <li><a href="./index.html">Inicio</a></li>
        <!-- More links -->
    </ul>
</nav>

/* Always hide the checkbox */
#btn-menu {
    display: none;
}

The checkbox is never visible but controls the menu state through CSS.

/* Hide hamburger on desktop */
.hamburger {
    display: none;
    width: 30px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1001;
}

/* Draw the 3 lines */
.hamburger .line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    border-radius: 3px;
    transition: all 0.3s;
}

The hamburger is hidden on desktop and only appears on mobile.

@media (max-width: 768px) {
    /* Show hamburger on mobile */
    .hamburger {
        display: flex;
    }
    
    /* Position menu off-screen */
    header nav {
        position: fixed;
        top: 10vh;
        left: -100%; /* Hidden to the left */
        width: 100%;
        height: 45vh;
        background-color: var(--bg-secundario);
        transition: all 0.4s ease;
        display: block;
        border-bottom: 1px solid #e0e0e0;
    }
    
    /* Vertical link layout */
    header ul {
        flex-direction: column;
        justify-content: space-evenly;
        height: 100%;
    }
    
    /* Slide menu in when checkbox is checked */
    #btn-menu:checked ~ nav {
        left: 0;
    }
}

When the checkbox is checked (by clicking the label), the ~ sibling selector reveals the menu.

How the Checkbox Hack Works

This technique relies on the CSS :checked pseudo-class and sibling selectors (~).

The Mechanism

Checkbox: Hidden <input type="checkbox"> maintains state
Label: Visible <label> triggers checkbox when clicked
Navigation: Sibling <nav> element responds to checkbox state
CSS Selector: #btn-menu:checked ~ nav selects nav when checkbox is checked

/* Default: Menu hidden */
header nav {
    left: -100%;
}

/* When checkbox is checked: Menu visible */
#btn-menu:checked ~ nav {
    left: 0;
}

<header>
    <!-- 1. Hidden checkbox -->
    <input type="checkbox" id="btn-menu">
    
    <!-- 2. Clickable label -->
    <label for="btn-menu" class="hamburger">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </label>
    
    <!-- 3. Navigation (sibling of checkbox) -->
    <nav>
        <!-- Menu items -->
    </nav>
</header>

Responsive Breakpoints

The navigation adapts at different screen widths:

Desktop (> 992px)
Tablet (768px - 992px)
Mobile (< 576px)

/* Default desktop styles */
header {
    display: flex;
    justify-content: space-between;
}

header nav {
    width: 70%;
    position: static;
}

header ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.hamburger {
    display: none;
}

Features:

Full horizontal menu visible
Hamburger icon hidden
Links evenly distributed

@media (max-width: 768px) {
    .hamburger {
        display: flex; /* Show hamburger */
    }
    
    header nav {
        position: fixed;
        top: 10vh;
        left: -100%;
        width: 100%;
        height: 45vh;
        transition: all 0.4s ease;
    }
    
    header ul {
        flex-direction: column;
        justify-content: space-evenly;
    }
    
    #btn-menu:checked ~ nav {
        left: 0;
    }
}

Features:

Hamburger menu activated
Slide-in panel from left
Vertical link stacking

Mobile uses the same hamburger menu as tablet, with inherited styles from the 768px breakpoint.The menu height (45vh) ensures it doesn’t cover the entire screen, maintaining context.

A secondary navigation exists in the footer:

<footer>
    <div class="footer-inner">
        <p class="footer-copy">2026 Proyecto Neptuno — Propuesta de renovación ficticia para Granada</p>
        <nav class="footer-nav" aria-label="Navegación secundaria">
            <a href="./index.html">Inicio</a>
            <a href="./ocio.html">Ocio</a>
            <a href="./gastro.html">Gastronomía</a>
            <a href="./proyecto.html">El proyecto</a>
            <a href="./contact.html">Contacto</a>
        </nav>
    </div>
</footer>

footer {
    background-color: var(--bg-footer);
    padding: 2.5rem 5%;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-nav {
    display: flex;
    gap: 2rem;
}

.footer-nav a {
    font-size: 0.8rem;
    color: var(--texto-muted);
    text-decoration: none;
    transition: var(--transicion-suave);
}

.footer-nav a:hover {
    color: var(--color-secundario);
}

Features:

Dark background with light text
Horizontal link layout
Hover color transition
Accessible with aria-label

Design Patterns

The header uses position: sticky to remain visible during scroll:

header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

Benefits:

Always accessible navigation
No JavaScript scroll listeners needed
Better UX for long pages

Transition Effects

Smooth animations enhance the menu experience:

header nav {
    transition: all 0.4s ease;
}

.hamburger .line {
    transition: all 0.3s;
}

.footer-nav a {
    transition: var(--transicion-suave); /* 0.3s ease */
}

Accessibility Considerations

ARIA Labels

Footer nav uses aria-label="Navegación secundaria" to distinguish from main nav

Alt Text

Logo image includes descriptive alt text: "Logo CC Neptuno"

Semantic HTML

Uses <nav> and <header> elements for proper document structure

Focus States

Links maintain default focus indicators for keyboard navigation

Key Takeaways

No JavaScript Required: The entire navigation system, including the mobile hamburger menu, works with pure HTML and CSS using the checkbox hack technique.

Header is consistent across all pages
Hamburger menu uses checkbox + label + sibling selector
Sticky positioning keeps nav accessible
Footer provides secondary navigation
Fully responsive with smooth transitions
Accessible with semantic HTML and ARIA labels

Getting Started

Project Structure

Styling

Components

Customization

Header Structure

Header Components

Logo

Navigation Menu

Hamburger Toggle

CSS Implementation

Desktop Navigation

Hamburger Menu (Mobile)

How the Checkbox Hack Works

The Mechanism

Responsive Breakpoints

Footer Navigation

Footer Styles

Design Patterns

Sticky Header

Transition Effects

Accessibility Considerations

ARIA Labels

Alt Text

Semantic HTML

Focus States

Key Takeaways

Next Steps

Project Overview

Pages Documentation

Build docs developers (and LLMs) love

Getting Started

Project Structure

Styling

Components

Customization

​Header Structure

​Header Components

Logo

Navigation Menu

Hamburger Toggle

​CSS Implementation

​Desktop Navigation

​Hamburger Menu (Mobile)

​How the Checkbox Hack Works

​The Mechanism

​Responsive Breakpoints

​Footer Navigation

​Footer Styles

​Design Patterns

​Sticky Header

​Transition Effects

​Accessibility Considerations

ARIA Labels

Alt Text

Semantic HTML

Focus States

​Key Takeaways

​Next Steps

Project Overview

Pages Documentation

Build docs developers (and LLMs) love

Header Structure

Header Components

CSS Implementation

Desktop Navigation

Hamburger Menu (Mobile)

How the Checkbox Hack Works

The Mechanism

Responsive Breakpoints

Footer Navigation

Footer Styles

Design Patterns

Sticky Header

Transition Effects

Accessibility Considerations

Key Takeaways

Next Steps