¿Cómo crear: menú fijo

¿Cómo crear un menú superior fijo?

Primer paso - Añadir HTML:

<div class="navbar">
  <a href="#home">Inicio</a>
  <a href="#news">Noticias</a>
  <a href="#contact">Contacto</a>
</div>
<div class="main">
  <p>Alguno de texto algunos texto algunos texto algunos texto..</p>
</div>

Segundo paso - Añadir CSS:

Para crear un menú superior fijo, utilice position:fixed y top:0.Por favor, tenga en cuenta que el menú fijo cubrirá su otro contenido. Para resolver este problema, agregue un margen superior (margin-top) igual o mayor a la altura del menú.

/* Barra de navegación */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Establecer la barra de navegación en una posición fija */
  top: 0; /* Colocar la barra de navegación en la parte superior de la página */
  width: 100%; /* Ancho completo */
}
/* Enlaces dentro de la barra de navegación */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Cambiar el fondo al pasar el ratón */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Contenido principal */
.main {
  margin-top: 30px; /* Añadir el margen superior externo para evitar que el contenido se solape */
}

Prueba por tu cuenta

¿Cómo crear un menú inferior fijo?

Para crear un menú inferior fijo, utilice position:fixed y bottom:0:

/* Barra de navegación */
.navbar {
  position: fixed; /* Establecer la barra de navegación en una posición fija */
  bottom: 0; /* Colocar la barra de navegación en la parte inferior de la página */
  width: 100%; /* Ancho completo */
}
/* Contenido principal */
.main {
  margin-bottom: 30px; /* Añadir el margen inferior externo para evitar que el contenido se solape */
}

Prueba por tu cuenta

Páginas relacionadas

Tutoriales:Barra de navegación de CSS