Cómo fijar un menú a la parte superior de la página

‍Un encabezado fijo es una estructura de navegación que mantiene su posición en la parte superior de la ventana del navegador mientras te desplazas por una página web, en lugar de irse con el desplazamiento. La estructura de navegación puede ubicarse inicialmente más abajo en la página. Es un elemento de uso común y, si tu sitio web tiene mucho contenido, probablemente convenga implementar al menos una forma básica, como una barra de navegación con un menú.

‍Para crear un encabezado sencillo, comienza colocando algunos botones de texto sobre una caja ancha. Los botones serán enlaces a páginas de tu sitio web o a ubicaciones de desplazamiento en la misma página. Entre 3 y 5 botones suele ser suficiente para destacar las características principales de un sitio sin sobrecargar la barra. Un elemento de menú también puede funcionar en lugar de los botones. Selecciona todos los botones y la caja ancha, haz clic derecho para abrir el menú y elige Agrupar, o selecciona Agrupar desde el menú Organizar en la parte superior de la pantalla. El grupo recién creado ofrece la opción Fijar a la parte superior en la pestaña Estilo.

‍Activa la casilla Fijar a la parte superior de la página; ahora tu grupo quedará fijado en la parte superior de tu pantalla. 

‍Recuerda resolver cualquier conflicto visual que pueda surgir por el movimiento del encabezado. En este ejemplo, un borde blanco en la caja de fondo del encabezado ayuda a diferenciarlo fácilmente cuando se coloca delante del contenido de la página y mantiene la coherencia con los bordes blancos usados para separar elementos en nuestras páginas. La coherencia es importante y a menudo ofrece soluciones naturales, como en este caso.

‍Ten en cuenta que, si la ubicación inicial del encabezado no está en la parte superior de la pantalla, se adherirá a ella al desplazarte, en cuanto entre en contacto. Además, la fijación se producirá en el momento en que el primer componente de tu encabezado entre en contacto. Se conservarán la estructura y la posición relativa de los componentes de tu encabezado.

‍En otras palabras, si quieres que un encabezado fijo no se adhiera a la parte superior de la pantalla, tendrás que insertar una caja invisible entre ambos y añadirla al grupo del encabezado.