Aprende como hacer un increible menú de navegación fijo en pantalla con CSS.

Share on Pinterest
Comparte con tus amigos










Enviar

Desde el re diseño de mi sitio web muchas personas han estado preguntándome acerca de como es que he hecho el menú de navegación de este sitio, sobre todo la parte para que el menú se quede fijo en pantalla.

La verdad es que es muy fácil, pero tenemos que aplicar algunos truquitos por hay, para que todo salga como queremos, asi que por eso hoy aprenderemos como hacer un menú de navegación fijo como este que puedes ver desde el demo.

Demo del menú de navegación que estaremos haciendo: https://www.falconmasters.com/demos/menu_fijo/

La estructura que necesitaremos para hacer el menú es la de un menú de navegación normal y corriente, la estructura es la siguiente:

<header>
	<nav>
		<ul>
			<li><a href="#">Inicio</a></li>
			<li><a href="#">Tutoriales</a></li>
			<li><a href="#">Cursos</a></li>
			<li><a href="#">Preguntame algo</a></li>
			<li><a href="#">Contacto</a></li>
		</ul>
	</nav>
</header>

Para motivos de este tutorial voy a agregar después de la etiqueta </header> un contenedor <section> con varios párrafos de texto dentro, esto para simular que hay contenido en nuestra pagina y poder navegar con la barra de navegación vertical de nuestro navegador.

A este section le he puesto una clase llamada contenido, y es con la que diferenciaremos donde empieza el contenido, esta parte si que es importante, porque mas adelante necesitaremos trabajar con ella.

<section class="contenido wrapper">

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus adipiscing commodo aliquet. Fusce bibendum orci magna, a pellentesque augue posuere sed. Ut bibendum magna tincidunt velit fermentum, eu laoreet arcu consectetur. Nullam nec enim sed justo fermentum sagittis. Nam varius dapibus risus, quis consectetur mauris. Praesent ut iaculis turpis. Phasellus congue tristique ligula et consequat.</p>

</section>

No te olvides de comenzar el documento eliminando los margenes y paddings que el navegador agrega por defecto, para eso utilizamos un pequeño reset con el selector universal *, yo en este caso voy a estar dándole un margen inferior a los elementos p para que los párrafos muestren un espaciado en forma de salto de linea.

/*Eliminamos los margenes y paddings que agrega el navegador por defecto*/
* {
  padding: 0;
  margin: 0;
}

/*Agregamos margenes inferiores a los parrafos*/
p {
  margin-bottom: 20px;
}

Ahora si comencemos a darle estilos a nuestro menú de navegación, primero que nada vamos a darle un 100% de tamaño para que el menú abarque todo el ancho del documento, después hacemos que el menú se quede fijo, el truco para que el menú de navegación se quede fijo en pantalla consiste en aplicarle una propiedad llamada position:fixed; a nuestro elemento del header.

Pero esto no es todo, también tenemos que agregar la propiedad z-index a nuestro header, con esto vamos a decirle que el menú se muestre por encima de los elementos como imágenes que se muestren en pantalla, que se muestren por debajo de nuestro menú si es que navegamos hacia abajo por la pagina, normalmente hay problemas con los slideshows, imágenes, videos, etc, para eso te recomiendo que le pongas un valor alto al z-index.

Y ya para finalizar la parte de nuestro header, le ponemos un fondo, el fondo que yo utilizo es un color negro con una opacidad, esto lo hago mediante colores rgba, los 3 primeros colores son rgb y el cuarto valor es el valor que le pondremos de opacidad.

header {
  background: rgba(0,0,0,0.9);
  width: 100%;
  position: fixed;
  z-index: 100;
}

De aquí en delante los demás es conocido, lo único que tenemos que hacer es darle forma a nuestro menú y a los items de la navegación, a continuación el código, que en realidad es muy sencillo, asi que me delimitare a no explicarlo todo, simplemente las partes que puedan parecer confusas. Como utilizamos ya un color negro de fondo yo puse el hover de los items color verde.

nav {
  float: left; /* Desplazamos el nav hacia la izquierda */
}

nav ul {
  list-style: none;
  overflow: hidden; /* Limpiamos errores de float */
}

nav ul li {
  float: left;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

nav ul li a {
  display: block; /* Convertimos los elementos a en elementos bloque para manipular el padding */
  padding: 20px;
  color: #fff;
  text-decoration: none;
}

nav ul li:hover {
  background: #3ead47;
}

Una vez aplicado estos últimos estilos, ya tendremos el menú de navegación, pero hay un problema y es que desde que cargamos la pagina en un inicio, el menú de navegación tapa una parte del contenido, esto lo resolvemos muy fácil, basta con agregar un padding al section="contenido". El padding lo tienes que calcular, y depende del alto que tenga tu menú, por ejemplo el padding que yo utilizare es de 80px.

.contenido {
  padding-top: 80px;
}

Yo agregue también un section con una clase llemada wrapper, la cual me permite delimitar el tamaño ancho tanto del menu, como del contenido o texto, en el ejemplo a continuación puedes explorar el código y encontraras este section junto con sus estilos.

.wrapper {
  width: 80%;
  margin: auto;
  overflow:hidden;
}

Menú de navegación fijo:

See the Pen Menu fijo en pantalla by Carlos Arturo Esparza (@falconmasters) on CodePen.5968

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

81 respuestas a “Tutorial como hacer un menú de navegación fijo en pantalla.”

  1. leonel dice:

    eu consulta x que no te haces un tuto que mostres que usas programa usas para programar y se usas un servidor o algo parecido¡¡¡ espero tu resuesta :)

  2. Lucía Calisaya dice:

    Muchas gracias por explicar cómo se hace un menú con estas características, Carlos Arturo! De a poquito voy entendiendo qué propiedades utilizás para cada elemento, :) Gracias, profe!!! :) Saludos!

  3. Diego Torres dice:

    Realmente me parecio genial este tutorial, ya tenia tiempo buscando algo asi, pero la mayoria eran demasiado basicos, pero esto es justo lo que buscaba, ando investigando como crear mi pagina web, la quiero algo sencilla y este menu de navegacion es fabulo gracias por compartir esto con los demas

  4. diego dice:

    tengo una duda ya que seguí este tutorial de menú de navegación fija y no me salio hay algo que se omitió. me podría ayudar a resolver mi duda

  5. ferney dice:

    Muchas Gracias. este menu se puede puede convertir en un menu de navegación desplegable y como lo podria hacer? soy nuevo en css ,muchas gracias por su respuesta .

  6. daniel dice:

    bien por el menu me sirvio para resolver un problema gracias

  7. Fercho Jerez dice:

    Muchas Gracias por los tutoriales , tengo una pregunta puedo convertir este menu en un menu resposivo ya que me seriviria de gran ayuda y como lo podria hacer , muchas gracias por su respuesta.

  8. Ale NoveL dice:

    You just made my day!
    Very useful, thanks 4 sharing. (=

  9. Alvaro Vera dice:

    como puedo hacer para que el menú aparezca desde otra sección y no al principio

  10. Julian Rodríguez dice:

    Hola, oye lo que sucede es que al ejecutar el codigo, yo uso menus emergentes, me elmina los menues emegerntes y me los deja todo feo y regado

  11. Karen Mossetto dice:

    Muy bueno, gracias!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  12. Luis Acosta dice:

    hola amigo antes que nada GRACIAS, (perdón por las mayúsculas) agracias a ti he podido ir dando una mejor estetica a mi pagina mas que todo es proyecto de la universidad oye me gustaría saber como puedo agregar esta caja de comentarios!!! saludos….

  13. Luis Acosta dice:

    hola amigo antes que nada GRACIAS, (perdón por las mayúsculas) agracias a ti he podido ir dando una mejor estetica a mi pagina mas que todo es proyecto de la universidad oye me gustaría saber como puedo agregar esta caja de comentarios!!! saludos…

  14. Carlos Salinas dice:

    Hola muy buenos tus tutoriales, eres muy claro para explicar, me gustaría saber cómo haces para que en el menú de esta página aparezcan esas lineas horizontales debajo de los textos del menú cuando el mouse pasa por sobre los títulos.

  15. Felipe Reyes dice:

    gracias por el tutorial. Saludos

  16. Ivan dice:

    Tutorial excelente, solo una cuestión, como puedo hacer para que el fondo del menu sea un poco transparente mientras que los textos del menu sean completamente opacos?

  17. mendoza dice:

    parce excelentes tutoriales, disculpa tienes un tutorial de menu vertical con despliegue a la derecha ya que tengo el mio se despliega pero no me da el background al desplegarlo solo al pasarle el mouse me da el background pero del hover y le pongo background con una nueva clase pero no se me ajusta gracias?

  18. Adalinda Reyes Mejia dice:

    holaaa n.n siempre me ayudan tus tutoriales :3 pero aqui intente hacer convinaciones del codigo y asi :c y me paso que o se si se queda pegado me tapa el contenido y si no pues no baja con el TnT podrias ayudarme?

  19. Cristhian Mj dice:

    una ayuda pls por que no me sale me falta creo el js como hago o que tipo de java utilizas por que no veo en el video

  20. jose dice:

    EXCELENTE…
    Pero si le digo la verdad he intentado hacerlo en la plnatilla por defecto de joomla (Protostar) y no consigo hacerlo…
    podria ayudarme?
    Gracias anticipadas

  21. 엘리구티 dice:

    gracias excelente tutorial

  22. Kevin Cano dice:

    Hola disculpa con una pregunta y si solo quisiera el menu sin que se desplace como lo podria modificar?

  23. Kevin Cano dice:

    Hola disculpa me podrias ayudar. Es que quiero saber como hago para que se sea simple osea que se quede arriba que no sea fijo ? Por favor respondeme

  24. Jesús Rubi dice:

    Hola, perdón.. pero no entendí muy bien como agregar los demás codigos (position:fixed;
    z-index)

    Podrías dejar todo el html entero, y completo de una vez, por que no entiendo muy bien como agregarlo

  25. WorldKrory dice:

    Buen tutorial, mucho mejor de lo que esperaba ya tengo mi menu totalmente personalizado, pero ahora no encuentro la forma de centrarlo, Me gustaria verlo en el centro de la pagina y si se puede que sea «responsive»
    Muchas gracias amigo ;)

  26. luis adrian jimenez fuentes dice:

    como puedo poner en la barra de menu para q mande a otra pagina ?

  27. pashasiito dice:

    @carlos aturo hola podrias hacer algo igual a esto pero con submenus? y con una imagen como logotipo al incio antes del inicio? de ante mano gracias algo asi como esto pero es que se me descuadra al ponerle la imagen de logotipo al inicio: http://prnt.sc/8wjucz

  28. Eduardo dice:

    te puedo hacer una pregunta de como hacer un menú diferente a este, pero tiene algo en común ??

  29. Ludmila Domínguez dice:

    Muchas gracias, siempre me salvas. Sólo una consulta, hay forma de que el scroll no pase sobre el menú? Ya que tengo pestañas donde hay scroll y en otras no, entonces cada vez que cambio de pestaña, se corre el menú lo que mide la barra de scroll. Gracias y saludos!

  30. Martín dice:

    Hola Carlos Arturo, excelente material y excelente explicación. Sin embargo no hay aprendizaje si no surgen dudas jajaj, por ésto quería preguntarte ¿por qué al momento de agregar el ancho del 100% al menú de navegación, lo hacemos sobre el selector header y no sobre el selector descendente header .wrapper nav? Muchas gracias!

    • Lo puedes hacer agregandole el 100% al .wrapper nav, yo en mi caso lo hago al header porque es posible que despues quiera agregar mas elementos dentro. Es cuestion de como quieres trabajar tu sitio, ambas formas estan bien. Saludos

  31. Jonathan Moreta dice:

    Discúlpame que soy un novato en esto gg pero una ves echo el menú como hago que al dar clic en cualquier opción del menú me siga apareciendo en la misma pagina información diferente o con formularios diferentes ? tal vez se hace con un enlace o tal vez con alguna división o lleno la información en el formulario de index.html y al dar clic en una opción se recorra en la misma pagina donde esta la información … por favor sácame de esa duda … =/

  32. Alexandrakreativa dice:

    Muchas gracias por compartir tu conocimiento. Podrías ayudarme con este mismo, si le pongo submenus, como puedo esconderlos. Gracias.

  33. cristhian dice:

    Excelente aporte bro, no daba con la solución del z-index: mayor a 100, esto en menor porcentaje hacia que me saliera la barra estatica debajo de los demas controles. Muchas gracias por tu aporte lo tome de la respuesta que le has dado a IVAN.

  34. ZeTZuNa KrOzZ dice:

    estoy utilizando bootstrap3 y me genera un problema con el color del texto al momento de pasar el mouse por encima del enlace, hay alguna manera de arreglarlo??

  35. Juan Sbraylin Diaz dice:

    Hola Me Gustaria Que Me Ayudaran En Algo,

    Es Que Estoy Haciendo Un PROYECTO De La Universidad, Estoy Trabajando En MACROMEDIA Dreamweaver Y Yo Hice Un Menu Y Me Gustaria Que Ese Menu Siempre Este Ahi Osea Que Si Abro Otra Pagina Del Proyecto El Menu Se Quede Ahi Y Se Cambie Lo De Abajo.

    • Eduardo Suárez Flores dice:

      Hola Juan.
      Yo estoy usando dw CC5 y tengo tu misma duda. Lo solucionaste?
      Yo había pensado en usar PHP con @include pero imagino que dreamwaver tendrá una mejor solución.

  36. Alfonso Valencia dice:

    Yo trataba de hacerlo por mi cuenta, entiendo que usaste padding-top para dejar un espacio entre el cuerpo de la pagina y el encabezado, pero al principio intente usar margin-top, y al parecer no funciona. Alguien puede explicarme por que el modificar margenes no mueve cajas (etiquetas) con position: fixed; ????

  37. Silvestre Alejandro Santiago M dice:

    hola y cómo agrego lo del social bar fjo, porque agrego pero se mueve todo

  38. Jose Hernandez Molina dice:

    buen tutorial, una pregunta si quiero agregar una pagina en cada uno de los menus como haria, es decir cuando de click sobre cada uno de los menus, me mande a una pagina que hace parte de la misma

  39. IVAN GIOVANNI VAZQUEZ ROMERO dice:

    como le ago para que la barra ocupe el ancho ttal de la pagina porque cuando loago yo solo me aparece hasta contacto

  40. IVAN GIOVANNI VAZQUEZ ROMERO dice:

    hola como le ago para que la barra ocupe el total del largo del navegador,cuando lo ago solo aparece hasta contacto

  41. Miguel García Solis dice:

    Hola , tengo un problema , estoy haciendo mi blog y estoy usando una plantilla que descargue de internet, el problema es que cuando cambio de pagina (es decir le doy clic a un menú) la barra de menú y el slide show desaparecen y solo me queda la opción de pagina principal, como soluciono ese problema.
    Saludos

  42. Ezequiel Savedra dice:

    Yo le puse un enlace de anclaje a mis secciones y cuando los clickeo me aparecen abajo del menu fijo, le aumente el padding-top pero sigue igual, ¿ como lo puedo solucionar?

  43. Javier Rosales Caballero dice:

    Hola muy buen material, me sirvió demasiado, solo me gustaría saber como puedo hacer para que cuando la pantalla se haga mas pequeña te cambie el menu en automático? espero darme a entender, veo que la tienes en esta pagina, si tengo mi pantalla en grande el menu me sale completo Tutoriales, Cursos y Necesitas ayuda?, pero cuando la pagina la hago mas pequeña cambia el menu.

  44. Monserrat dice:

    Hola! me gusto mucho como quedo el menu pero ahora tengo un problema, como le hago para ocultar lo que me sale en el submenu

  45. Alex Ao dice:

    Buenas tardes Carlos disculpa no entiendo muy bien la estructura del código, la verdad no se si este haciendo algo mal, quiero agregar una opción desplegable en mi menú fijo, es posible o solo he gastado el tiempo en algo que no se puede hacer?, ya intente varias maneras y no encuentro la solución.

    De ante mano muchisimas gracias por la respuesta.

  46. Matías Nicolás Valdés Garrido dice:

    Tengo una duda con las rutas en los enlaces del menu… Tengo varias paginas estáticas (por ejemplo, pagina1.html, pagina2.html) y al momento de ir a esas páginas tengo problemas con la ruta, ya que se ve algo «feo» (www.sitio.cl/wp-content/themes/mytheme/pagina1.html). Como puedo solucionar el problema con esas rutas?

  47. Erne Full dice:

    Hola, puse position: fixed en mi cabecera y todo bien; lo único malo es que tengo un botón para subir y este dejo de funcionar. ¿Que paso?

  48. Ramon Cristancho dice:

    Benas amigo, primero agradecerle el trabajo que hace montando estos cursos, 100% recomendados! Solo tengo una duda, soy un poco nuevo en esto del diseño de paginas web (me mal acostumbre a usar Dreamweaver), y no logro hacer que mi menu que solo tiene cuatro opciones quede centrado, ya que esta a la izquierda y de verdad quedaria mejor en el centro de la pagina. He intentado con varias soluciones donde cambian la position a relative, le agregan un margen de 50% en left, pero nada da resultado. Saludos y felicitaciones por el gran trabajo!

  49. SinTapujos dice:

    Podrías ayudarme a hacer este popup adaptable, que quede fijado en medio de la pagina web??

    #topbar {
    height:30px;
    width:auto;
    background: #005094 url(‘http://lh3.ggpht.com/_beEpWOXwLJE/TIb57Lu4fwI/AAAAAAAABE0/q7niFVRbyNE/top-toolbar.jpg’);
    background-repeat:repeat-x;
    text-align:left;
    padding-top:4px;
    }
    #adsground {
    height:auto;
    margin:0 auto;
    width: 336px;
    background:#fff;
    border-bottom:2px #005094 solid;
    border-right:2px #005094 solid;
    border-left:2px #005094 solid;
    text-align:Center;
    padding:4px;
    }

    #headlineatas {
    opacity:1.0;
    height:auto;
    width:auto;
    position:fixed;
    top:65px;
    left:170px;
    border-bottom:1px #005094 solid;
    border-bottom:0px blue solid;
    color:#333;
    padding:0px;
    z-index:1001;
    font-size:13px;}

    function getValue()
    {
    document.getElementById(«headlineatas»).style.display = ‘none’;
    }

    Ads by Google

    Publicidad

    (adsbygoogle = window.adsbygoogle || []).push({});

    / / code ends / /

  50. Emiliano Torres dice:

    Hola tengo hecho un menu lateral el cual lo muestro y oculto a traves de jquery. Como puedo hacer para que cuando recargue la pagina me guarde el estado en que lo deje. Por ejemplo si lo tengo oculto al recargar la pagina siga quedando oculto y viceversa. Igual como en youtube.

  51. David Faro dice:

    Muy buenas, ya tengo el menú pero necesito que se quede fijo aunque meta a href con enlaces a otras páginas, necesito un menú en el top inamovible para navegar por diferentes enlaces en otros servidores.

  52. Kerem Paredes dice:

    Graciaaaaaas! muy útil! :D

  53. Rauk dice:

    Amigo, ¿Y como hago para que al dar clic me mande a otra página del mismo proyecto?
    Gracias de antemano. 😞I

  54. JINU dice:

    Olle bro al momento de hacerlo el fondo de los botones me sale transparante en ves de negro como a ti como puedo cambiarlo?

  55. Julio Andres Ortegon Mejia dice:

    https://uploads.disquscdn.com/images/9fb97d85746dec5b079fcb3cc9679143d1abbdd1f010e7abfe5ec97cc9f37e3c.png
    puse un imagen en la lista y me aparece con u espacio debajo que no se como quitar D: ayuda
    gracias

  56. Julio Andres Ortegon Mejia dice:

    puse una imagen y me aparece con un pequeño espacio que no se como quitar ayuda D:
    Gracias https://uploads.disquscdn.com/images/b517743a974c96c31bdf8bf4f7851b61b5317e4af0082819f8c0a996029efb81.png

  57. Arturo Arguelles dice:

    Si ya tengo un archivo css con informacion y solo deseo que se aplique a un documento en particular ej. contacto no a mi archivo index como se le hace para dividirlo ? y no me afecte todo el doc

  58. Jesica Mangiaruga dice:

    Hola! gracias por el aporte, creo que es justo lo que estaba buscando! sólo una pregunta, como hago para que sea igual pero en vertical? Gracias!!

  59. Entiendo que el menú es para que cuando lo pulses vaya a una sección de la página web que se está viendo, pero si quiero que muestre sólo el contenido de esa sección. O sea, la información está escondida y cuando pulse sobre una opción del menú aparezca el contenido, qué habría que cambiar en el HTML y CSS?. Muchas Gracias

  60. Necesito cambiar este menú de etiquetas por el tuyo y que haga el mismo funcionamiento que hace el de etiquetas. ¿Puedo conseguirlo?, puedes echarme una mano? Muchísimas gracias.
    http://maxgloxar.com/wp-content/uploads/analisis/bond/CortoPlazo/TBOND%2010%20YEARS%20USA.html#

  61. Jonathan Champitt dice:

    hola saludos me pareció muy útil, solo una consulta soy un poco nuevo , como haría para que el primer botón del menú siga con el hover verde siempre y los demás solo cuando pase el cursor del mouse, agradecería tu respuesta.

  62. Gabi Fernanda dice:

    Si quisiéramos añadir publicidad a los lados del menú. ¿Cómo se haría?
    Muchas Gracias por tu ayuda.

  63. Chazy Rose dice:

    maestro de maestros, me ayudo mucho Tu explicación, ya te sigo :D

  64. Ambrosio Henríquez dice:

    no me sirvio, no se que pasa?? queda todo desordenado y la tabla no funciona

  65. Humberto Molina López dice:

    la rego el pading en class . contenido , no hay otra forma de ponerlo sin poner el pading?

  66. joana dice:

    Hola Carlos Arturo!! El menú genial, lo he hecho desplegable y queda estupendo, solo que tengo enlaces internos en él, y he tenido que poner padding-top muy grande a cada article para que no se quede debajo del menú, pero claro, al bajar con el scroll se ve mucho espacio entre los articles. Hay alguna manera de solucionarlo? he probado ha hacer la «trampita» de poner los «id´s» mas arriba, pero con el tema flex se me desmorona y no funciona bien. Me ayudas? Mil gracias de antemano!

  67. Kevin Del Angel dice:

    muchas gracias bro :3

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Aprende con nuestros cursos

React y Firebase: El Curso Completo, Práctico y desde Cero

React y Firebase: Curso Completo, Práctico y desde Cero

En este curso aprenderás React desde lo mas básico y paso por paso hasta un nivel avanzado donde podrás crear sitios y aplicaciones web reales.

Inicia el curso

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 5: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso