Como criar: menu fixo

Como criar um menu superior fixo

Primeiro passo - Adicionar HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div class="main">
  <p>Algum texto algum texto algum texto algum texto..</p>
</div>

Segundo passo - Adicionar CSS:

Para criar um menu superior fixo, use position:fixed e top:0Atenção, o menu fixo cobrirá seu outro conteúdo. Para resolver isso, adicione uma margem superior (margin-top) igual ou maior à altura do menu.

/* Barra de navegação */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Define a barra de navegação como posição fixa */
  top: 0; /* Coloca a barra de navegação no topo da página */
  width: 100%; /* Largura total */
}
/* Links dentro da barra de navegação */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Altera o fundo ao passar o mouse */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Conteúdo principal */
.main {
  margin-top: 30px; /* Adiciona margem superior externa para evitar sobreposição de conteúdo */
}

Experimente pessoalmente

Como criar um menu inferior fixo

Para criar um menu inferior fixo, use position:fixed e bottom:0:

/* Barra de navegação */
.navbar {
  position: fixed; /* Define a barra de navegação como posição fixa */
  bottom: 0; /* Coloca a barra de navegação no fundo da página */
  width: 100%; /* Largura total */
}
/* Conteúdo principal */
.main {
  margin-bottom: 30px; /* Adiciona margem inferior externa para evitar sobreposição de conteúdo */
}

Experimente pessoalmente

Páginas relacionadas

Tutorial:Barra de navegação CSS