Una barra de navegación (navbar) funcional y bien diseñada es uno de los componentes clave de cualquier sitio web. Sirve como hoja de ruta para los usuarios, ayudándoles a navegar por varias páginas. Una barra de navegación suele colocarse en la parte superior de una página web, donde siempre está visible para que los usuarios accedan a enlaces clave. En este artículo, exploraremos cómo crear una barra de navegación CSS visualmente atractiva y funcional usando HTML y CSS. También analizaremos varias técnicas para garantizar que la barra de navegación permanezca en la parte superior de la página.

Puede ver una demostración en vivo de esta barra de navegación y explorar su funcionalidad visitando la vista previa en CodePen.

El siguiente fragmento de código demuestra la creación de una barra de navegación responsiva con un logotipo, elementos de menú y un botón de llamada a la acción. Aquí está el código HTML y CSS:

Desglosando el código
Echemos un vistazo más de cerca a cómo se crea la barra de navegación usando HTML y CSS.

Estructura HTML

La parte HTML del código es sencilla. Consta de un elemento de navegación que contiene tres componentes principales:

• Un logotipo (una imagen)
• Una lista de **menú **con enlaces en los que se puede hacer clic (Inicio, Acerca de nosotros, Contáctenos, Blog)
• Un **botón **que sirve como llamado a la acción (Llamar ahora)
• La estructura está envuelta dentro de un elemento, que actúa como contenedor para la barra de navegación.

El logotipo se crea utilizando una etiqueta . El menú es una lista desordenada (

)

Estilo con CSS

La magia ocurre en la sección CSS, donde definimos el diseño y la apariencia de la barra de navegación. Analicemos algunos de los elementos clave.

Estilo de fondo y cuerpo
El cuerpo tiene un fondo degradado que pasa del azul (#2258c3) al rosa (#fd2df3). La altura está establecida en 100vh (altura de la ventana gráfica), lo que garantiza que el fondo ocupe toda la pantalla y que no haya márgenes para evitar espacios no deseados alrededor de la página.

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

Estilo de la barra de navegación

La barra de navegación tiene un fondo blanco y esquinas redondeadas (border-radius: 30px). El relleno y el margen crean espacios dentro y fuera de la barra de navegación. La propiedad display: flex convierte la barra de navegación en una caja flexible, lo que permite la alineación horizontal de sus elementos secundarios. Justify-content: space-between garantiza que el logotipo, el menú y el botón estén espaciados uniformemente.

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

Fijando la barra de navegación en la parte superior

Una de las funcionalidades clave de una barra de navegación es permanecer en la parte superior de la página mientras se desplaza. Para lograr esto utilizamos la posición: propiedad fija. Esto permite que la barra de navegación permanezca fija en la parte superior (arriba: 0) independientemente del desplazamiento. Además, el índice z: 9999 garantiza que la barra de navegación esté siempre encima de otros elementos de la página.

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

Elementos del menú e interactividad

Los elementos del menú se muestran horizontalmente usando display: flex en la clase .menu. Los elementos reciben espacio a través del margen y cada elemento tiene un estilo para eliminar el estilo de lista y el relleno predeterminados. Los enlaces dentro de los elementos del menú no tienen decoraciones de texto y están diseñados con una fuente en negrita y un color oscuro.

El efecto de desplazamiento sobre los enlaces cambia el color para que coincida con el color de fondo azul (#2258c3), lo que proporciona una señal visual de que el enlace es interactivo.

.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 botones

El botón tiene un estilo con fondo azul (#2258c3), texto blanco y esquinas redondeadas (border-radius: 20px). Al pasar el cursor, el fondo cambia a rosa (#fd2df3) para que coincida con el degradado del fondo.

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

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

Cómo mantener la barra de navegación siempre visible

Para arreglar el encabezado en la parte superior de la página con CSS, usa la posición: propiedad fija junto con top: 0. Esto garantiza que la barra de navegación permanecerá en la parte superior a medida que el usuario se desplaza. Así es como se aplica en el código:

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