Cómo dar estilo a una barra de navegación en CSS

Autor: | Última modificación: 9 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

Las barras de navegación son un elemento clave para la usabilidad de tu página web. Por ello, en este post, te enseñaremos cómo dar estilo a una barra de navegación en CSS para que sea tanto útil como coherente con tu estética. Ten en cuenta que, aunque los ejemplos que te demos se centrarán en dispositivos móviles, el flujo de trabajo para dar estilo a una barra de navegación en CSS es el mismo para cualquier dispositivo.

Antes de empezar

Antes de dar estilo a una barra de navegación en CSS, te recomendamos crear un archivo CSS especial para los estilos de este elemento. En nuestro caso, lo hemos llamado navbar.css. Dividir tu página web en distintos archivos CSS es una gran forma de darle legibilidad a tu código, pues es más fácil leer veinte líneas de código especial para un elemento que leer un archivo con 300 líneas de código de muchos elementos.

Para dar estilo a una barra de navegación en CSS, empezamos por otorgarle al elemento <nav> de HTML un atributo de clase. Esto nos permitirá darle estilo a toda la barra de navegación usando su selector de clase. Nosotros lo hemos llamado «.navbar».

Puedes darle atributos de clase a todos los elementos que necesites. Una barra de navegación normalmente tendrá un logo y un icono de hamburguesa; te sugerimos darle un atributo de clase a cada uno de esos elementos. Nosotros los hemos llamado «.logo» y «burger-icon», respectivamente.

Para que tu barra de navegación ocupe la totalidad del ancho de la página web, recuerda quitar el margen del elemento <body>. Esto lo logras dándole un valor 0 al <margin> y <padding> de este elemento. Como esto es algo que queremos que pase en todas las secciones de nuestra página, podemos añadirlo a nuestro archivo CSS reset. Si te interesa conocer más del archivo reset, puedes leer nuestro post sobre cómo este nos ayuda a preparar una página web en diseño responsive.

Posicionamiento

A la hora de dar estilo a una barra de navegación en CSS, la posición de sus elementos es muy importante. Usaremos como ejemplo una página web móvil en la que queremos que el nombre de nuestra página web esté al centro y el menú de hamburguesa (lista de enlaces), a la izquierda.

Posicionamiento del logotipo

Para situar el nombre de nuestra página web en el centro de la barra de navegación, podemos usar su atributo de clase y definir como position la opción absolute. Sin embargo, la forma más fácil de alinear este logotipo al centro es usar la propiedad text-align: center. Lo puedes hacer usando su selector de clase .logo.

Posicionamiento de la hamburguesa

Seguramente lo primero que te encontrarás con tu icono de hamburguesa es que está completamente pegado al borde de tu página web. Esto sucede porque le hemos quitado el margen al elemento cuerpo de nuestro archivo CSS (elemento <body>). Basta con añadirle una propiedad margin-left con el valor que desees en la unidad de medida que quieras para desplazarlo un poco a su derecha.

Ahora que has situado tus elementos en el eje horizontal, seguramente notarás que están completamente pegados al borde superior de la página web. La manera más fácil de centrarlos en vertical será determinar su propiedad line-height con el mismo valor de la altura de la barra de navegación. Por ejemplo, podrías darle un height de 50px al selector de clase .navbar y, después, un line-height de 50px a ambos elementos (.logo y .burger-icon). Esto funciona porque tanto el icono de hamburguesa como el logotipo son elementos en línea que ocupan la misma línea de texto.

Dar estilo a un enlace

En nuestro post sobre cómo insertar una barra de navegación en HTML hemos visto que el logotipo de la página web también funciona como un enlace al header. Puede que este enlace haga que la apariencia de nuestro logo sea de un enlace visitado (color morado y subrayado). Para modificar la apariencia de nuestro logotipo a modo de texto, basta con insertarle estilos en nuestro documento navbar.css.

Una forma de seleccionar el enlace dentro de nuestro logotipo es usar la cadena de selectores de clase «.navbar .logo a». Como solo tienes un enlace dentro de la clase .logo, estarás seleccionando específicamente ese elemento HTML. Una vez seleccionado, puedes insertar la propiedad de color que quieras para eliminar el morado e insertar la propiedad «text-decoration: none» para eliminar el subrayado. Recuerda que bajo este selector puedes modificar la propiedad font como desees.

¿Qué sigue?

Ahora que sabes cómo dar estilo a una barra de navegación en CSS, ¡es el momento de poner en práctica tus conocimientos! Para ello te recomendamos crear tu propia página web y, para aprender en profundidad cómo hacerlo, te ofrecemos el Desarrollo Web Full Stack Bootcamp. Entre muchas otras cosas, en este bootcamp crearás y diseñarás tu propia página web usando todo lo que aprenderás sobre CSS y HTML. ¡Apúntate!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!