Uma barra de navegação (barra de navegação) bem projetada e funcional é um dos principais componentes de qualquer site. Ele serve como um roteiro para os usuários, ajudando-os a navegar por diversas páginas. Uma barra de navegação é comumente posicionada na parte superior de uma página da web, onde está sempre visível para os usuários acessarem os principais links. Neste artigo, exploraremos como criar uma barra de navegação CSS visualmente atraente e funcional usando HTML e CSS. Também discutiremos várias técnicas para garantir que a barra de navegação permaneça no topo da página.

Você pode conferir uma demonstração ao vivo desta barra de navegação e explorar sua funcionalidade visitando a visualização no CodePen.

O trecho de código a seguir demonstra a criação de uma barra de navegação responsiva com logotipo, itens de menu e um botão de call to action. Aqui está o código HTML e CSS:

Decompondo o código
Vamos dar uma olhada mais de perto em como a barra de navegação é criada usando HTML e CSS.

Estrutura HTML

A parte HTML do código é direta. Consiste em um elemento nav que contém três componentes principais:

• Um logotipo (uma imagem)
• Uma **lista de menu ** com links clicáveis ​​(Página inicial, Sobre nós, Fale conosco, Blog)
• Um **botão **que serve como uma frase de chamariz (Ligue agora)
• A estrutura é encapsulada dentro de um elemento, que atua como um contêiner para a barra de navegação.

O logotipo é criado usando uma tag . O menu é uma lista não ordenada (

)

Estilizando com CSS

A mágica acontece na seção CSS, onde definimos o layout e a aparência da barra de navegação. Vamos discutir alguns dos elementos principais.

Fundo e estilo corporal
O corpo tem um fundo gradiente que faz a transição do azul (#2258c3) para o rosa (#fd2df3). A altura é definida como 100vh (altura da janela de visualização), o que garante que o plano de fundo preencha toda a tela e não haja margem para evitar espaços indesejados ao redor da página.

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

Estilo da barra de navegação

A barra de navegação tem fundo branco e cantos arredondados (border-radius: 30px). O preenchimento e a margem criam espaçamento dentro e fora da barra de navegação. A propriedade display: flex torna a barra de navegação uma flexbox, permitindo o alinhamento horizontal de seus elementos filhos. O justificar-content: space-between garante que o logotipo, o menu e o botão sejam espaçados uniformemente.

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

Consertando a barra de navegação no topo

Uma das principais funcionalidades de uma barra de navegação é permanecer no topo da página durante a rolagem. Para conseguir isso, usamos a posição: propriedade fixa. Isso permite que a barra de navegação permaneça fixa na parte superior (top: 0) independentemente da rolagem. Além disso, o z-index: 9999 garante que a barra de navegação esteja sempre acima de outros elementos da página.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

Itens de menu e interatividade

Os itens de menu são exibidos horizontalmente usando display: flex na classe .menu. Os itens recebem espaçamento na margem e cada item é estilizado para remover o estilo de lista e preenchimento padrão. Os links nos itens de menu não têm decorações de texto e são estilizados com fonte em negrito e cor escura.

O efeito de foco nos links muda a cor para combinar com a cor de fundo azul (#2258c3), fornecendo uma dica visual de que o link é interativo.

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

Estilo de botão

O botão tem um fundo azul (#2258c3), texto branco e cantos arredondados (border-radius: 20px). Ao passar o mouse, o plano de fundo muda para rosa (#fd2df3) para corresponder ao gradiente do plano de fundo.

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

Como manter a barra de navegação sempre no topo

Para corrigir o cabeçalho no topo da página com CSS, você usa a propriedade position: fixa junto com top: 0. Isso garante que a barra de navegação permanecerá no topo enquanto o usuário rola. Veja como isso é aplicado no código:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}