Construa você mesmo - Cabeçalho

Já que o seu site será visto em diferentes dispositivos, é hora de criar uma navegação entre páginas que responde a múltiplos tamanhos de tela!

Se prepare para...

Criar um Cabeçalho para o seu site que contém o componente de Navegação
Fazer o componente de Navegação responsivo

Tente você mesmo - Construa um novo componente de Cabeçalho

Crie um novo componente de Cabeçalho. Importe e utilize seu componente Navigation.astro existente dentro de um elemento <nav> que está dentro de um elemento <header>.
Me mostre o código!
Crie um arquivo chamado Header.astro em src/components/
src/components/Header.astro
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

Tente você mesmo - Atualize suas páginas

Em cada página, substitua seu componente <Navigation/> existente com o seu novo cabeçalho.

Me mostre o 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 Inicial";
---
<html lang="pt-BR">
  <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>

Verifique a pré-visualização do seu navegador e verifique que o seu cabeçalho é mostrado em todas as páginas. Ele não se parecerá diferente ainda, mas se você inspecionar sua pré-visualização utilizando ferramentas de desenvolvimento, você irá ver que agora você tem elementos como <header> e <nav> entre os seus links de navegação.

Adicione estilos responsivos

Atualize Navigation.astro com a classe CSS para controlar seus links de navegação. Envolva os links de navegação existentes em uma <div> com a classe nav-links.
src/components/Navigation.astro
```
---
---
<div class="nav-links">
  <a href="/">Início</a>
  <a href="/about">Sobre</a>
  <a href="/blog">Blog</a>
</div>
```

Copie os estilos CSS abaixo em global.css. Esses estilos:

Estilizam e posicionam os links de navegação para dispositivos móveis
Incluem uma classe expanded que pode ser alternada para mostrar ou esconder os links em dispositivos móveis
Utilizam uma @media query para definir diferentes estilos em tamanhos de tela maiores

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 da navegação */

.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;
  }

}

Redimensione sua tela e veja os diferentes estilos sendo aplicados em diferentes larguras de tela. Seu cabeçalho agora é responsivo ao tamanho da tela através do uso de @media queries.

Checklist

Eu posso utilizar CSS para adicionar elementos responsivos ao meu site.

Recursos

Editar página Translate

Anterior
Crie um rodapé de redes sociais Próximo
Envie seu primeiro script ao navegador

Contribute

Community