Las barras de navegación nos permiten darle una guía a nuestros visitantes sobre qué hay en una página web y cómo navegarla. Las barras de navegación son un elemento esencial a la hora de crear un sitio web y ubicarlas correctamente es fundamental. Por ello, en este post, te enseñaremos cómo situar una barra de navegación con Flexbox, un sistema relativamente nuevo para la disposición de elementos en una página web.
Situar una barra de navegación con Flexbox
Las barras de navegación son un elemento tan importante en una página web que no puede resumirse todo en un único post. Para ampliar la información de cómo situar una barra de navegación con Flexbox es posible que te interese leer nuestros post sobre cómo insertar una barra de navegación en HTML y cómo dar estilo a una barra de navegación en CSS.
Para comenzar a entrar en el tema de este artículo sobre situar una barra de navegación con Flexbox, debes saber que en esta barra de navegación tenemos un logotipo, un icono de hamburguesa y un menú con flexbox de hamburguesa con una lista de enlaces. Veamos cómo situarlos para obtener una buena funcionalidad además de un buen diseño.
Posicionamiento de elementos con Flexbox
Lo primero que debemos hacer para situar una barra de navegación con Flexbox es seleccionarla y darle la propiedad display:flex. Puede que al inicio este cambio se vuelta un poco caótico, pues tu logotipo, icono y menú con flexbox se ubicarán uno al lado de otro en sentido horizontal. Esto sucede porque, al no darle un valor a la propiedad flex-direction, la dirección de los elementos se determina de manera automática de izquierda a derecha. Si quieres saber más sobre la propiedad que determina el orden y dirección de los elementos en Flexbox, te invitamos a leer nuestro post sobre la propiedad flex-direction.
Nota: para los siguientes pasos te recomendamos tener un conocimiento básico de las propiedades de Flexbox, por ello, te invitamos a leer esta guía completa de Flexbox que resume sus propiedades a la perfección.
Ahora, para explicarte cómo situar una barra de navegación con Flexbox, debemos tener en cuenta que querremos que nuestros elementos dentro de la barra de navegación o nav con flexbox estén centrados en el eje vertical de la barra. Para esto, usamos la propiedad align-items y le damos el valor center. Una vez tengas tus elementos alineados al centro, es el momento de ponerlos en orden. Puede que en este momento esté primero el logo y luego el icono de hamburguesa, pero nosotros queremos que este último esté a la izquierda; ¿cómo lo ubicamos?
Para determinar el orden de los elementos, teniendo en cuenta que nuestro flex-direction está en row (de izquierda a derecha), podemos usar la propiedad order. Al utilizar esta propiedad, basta con darle un valor a cada elemento o flex-item para que los elementos se ordenen según este valor. Como queremos que nuestro icono de hamburguesa sea el primero a la izquierda, podemos darle un valor de -1.
Ya que el menú con flexbox de hamburguesa o lista de enlaces es un elemento que aparece y desaparece y que no está realmente ubicado dentro de la barra de navegación o nav con flexbox, es más sencillo que lo saquemos de la metodología flex. Por ello, lo mantendremos con una posición absoluta. Esta posición determina que el flexbox menú usará la esquina superior izquierda del viewport para situarse. Por ello, basta con darle un margen top con el mismo valor de la altura de la barra de navegación o nav con flexbox y un margen left de 0 para que esté ubicado justo después de la barra y pegado a la izquierda de la página web.
Para darle un alto de la altura completa de la página web, podemos utilizar lo que hemos aprendido en nuestro post sobre variables y cálculos en CSS. Entonces, podríamos escribir que la lista de enlaces o flexbox menú hamburguesa de nuestra página tiene un height: calc (100vh – var (–navbar-size)). Esto quiere decir que tendrá la altura del cien por ciento del navegador menos la altura de la barra de navegación, que hemos establecido como una variable en nuestro elemento raíz.
Ahora que tenemos la mayoría de elementos ubicados en nuestra barra de navegación, solo nos queda centrar nuestro logotipo en el centro de la página web. Aunque podríamos simplemente darle la propiedad align-item:center, esto realmente nos dejará un elemento centrado dentro de su línea, pero desplazado por el espacio que ocupa nuestro icono de hamburguesa a la izquierda.
Por ello, podemos centrar el elemento usando la propiedad de flex justify-content:center y, a continuación, darle un margen al lado derecho de exactamente el mismo tamaño que el ancho del icono de hamburguesa. Podemos asegurarnos de que sea el mismo tamaño creando una variable para este dato. Así que al escribir margin-right: var (–burger-width), tendremos un margen a la derecha de nuestro logo, empujándolo al centro de la página web.
¿Te animas a seguir aprendiendo?
Como has visto en este post, hay muchas maneras de crear una misma función o aplicar un mismo estilo en CSS. Ahora que has aprendido cómo situar una barra de navegación con Flexbox o el flexbox menú, ¡te invitamos a seguir aprendiendo de las distintas funciones que te ayudarán a crear una gran página web!
Desde KeepCoding te ofrecemos el Desarrollo Web Full Stack Bootcamp para aprender en profundidad sobre HTML y CSS, entre otros, así como para ponerlos práctica creando al diseñar tu propia página web. ¡Anímate a seguir aprendiendo e inscríbete para convertirte en desarrollador!
