Constrúyelo tu mismo - Encabezado

Dado que tu sitio se verá en distintos dispositivos, ¡es hora de crear una navegación de página que pueda responder a múltiples tamaños de pantalla!

Prepárate para...

Crear un encabezado para tu sitio que contenga el componente de navegación
Hacer que el componente de navegación sea responsivo

Pruébalo tu mismo - Crea un nuevo componente Header

Crea un nuevo componente header. Importa y utiliza tu componente existente Navigation.astro dentro de un elemento <nav> que esté dentro de un elemento <header>.
¡Enséñame el código!
Crea un archivo llamado Header.astro en src/components/
src/components/Header.astro
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

Pruébalo tu mismo - Actualiza tus páginas

En cada página, sustituye el componente <Navigation/> existente por tu nuevo encabezado.

¡Enséñame el código!

---
import Navigation from '../components/Navigation.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Página de inicio";
---
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

Comprueba la vista previa de tu navegador y verifica que tu encabezado se muestra en todas las páginas. Todavía no se verá diferente, pero si inspeccionas la vista previa con las herramientas de desarrollo, verás que ahora tienes elementos como <header> y <nav> alrededor de los enlaces de navegación.

Añade estilos responsivos

Actualiza Navigation.astro con la clase CSS para controlar tus enlaces de navegación. Envuelve los enlaces de navegación existentes en un <div> con la clase nav-links.
src/components/Navigation.astro
```
---
---
<div class="nav-links">
  <a href="/">Inicio</a>
  <a href="/about">Sobre mi</a>
  <a href="/blog">Blog</a>
</div>
```

Copia los siguientes estilos CSS en global.css. Estos estilos:

Estilizan y posicionan los enlaces de navegación para dispositivos móviles
Incluyen una clase expanded que puede activarse para mostrar u ocultar los enlaces en dispositivos móviles.
Utilizan una @media query para definir estilos diferentes para tamaños de pantalla mayores.

html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

/* estilos de la barra de navegación*/

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  background-color: #ff9776;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: #ff9776;
}

.expanded {
  display: unset;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }

}

Cambia el tamaño de la ventana y comprueba si se aplican diferentes estilos a diferentes anchos de pantalla. Tu encabezado es ahora responsiva al tamaño de la pantalla mediante el uso de consultas @media.

Checklist

Puedo utilizar CSS para añadir elementos responsivos a mi sitio.

Recursos

Contribuir

Comunidad