¿Sabes como hacer una barra de navegación en html y CSS y dar estilo a una barra de navegación en CSS? 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 a dar estilo a una barra de navegación en CSS
Antes de dar estilo a una barra de navegación en CSS, te recomendamos crear un archivo de nav en CSS especial para los estilos css para barra de navegacion 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” para nav en CSS.
Puedes darle atributos de clase a todos los elementos que necesites. Una barra de navegación, nav en CSS, 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 y cómo dar estilo a una barra de navegación en CSS, 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. En el proceso de dar estilo a una barra de navegación en CSS 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 centrar menu css 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,con los estilos de navbar, 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 para los estilos de navbar. 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 aparte de los estilos de navbar.
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!
