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: http://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:

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.

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.

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.

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.

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.

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.

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

  • leonel

    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 :)

    • Porque en realidad es muy sencillo, utilizo sublime text 2

  • Lucía Calisaya

    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!

    • Muchas gracias a ti Lucia por ver mi contenido, me alegra que te sea de ayuda y aprendizaje.

  • Diego Torres

    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

    • Genial! me alegra que te haya servido :D

      • pashasiito

        @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

  • diego

    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

  • ferney

    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 .

  • daniel

    bien por el menu me sirvio para resolver un problema gracias

  • Fercho Jerez

    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.

  • Ale NoveL

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

  • Alvaro Vera

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

  • Julian Rodríguez

    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

  • Karen Mossetto

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

  • Luis Acosta

    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….

  • Luis Acosta

    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…

  • Carlos Salinas

    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.

    • Simplemente le agrego un border-botom al elemento li.

  • Felipe Reyes

    gracias por el tutorial. Saludos

  • Ivan

    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?

    • has que tu z-index tenga un valor menor a 100 así lograras el efecto que estas pidiendo :)

    • Juan Hdez

      usa RGBA(1,1,1,0.5)
      Donde A (el ultimo numero) es ALPHA … equivalnete al nivel de opacidad. En este caso a la mitad 0.5

      Asi:

      .menu{
      Background: rgba(1,2,1,0.5);
      Color: rgba(1,1,1,1);
      }

  • mendoza

    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?

  • Adalinda Reyes Mejia

    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?

  • Cristhian Mj

    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

  • jose

    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

  • 엘리구티

    gracias excelente tutorial

  • Kevin Cano

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

  • Kevin Cano

    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

  • Jesús Rubi

    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

  • WorldKrory

    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 ;)

  • luis adrian jimenez fuentes

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

    • The iProgramX

      Debes poner un link a la otra página, en la parte del botón

  • pashasiito

    @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

  • Eduardo

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

  • Ludmila Domínguez

    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!

  • Martín

    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

  • Jonathan Moreta

    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 … =/

  • Alexandrakreativa

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

  • cristhian

    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.

  • ZeTZuNa KrOzZ

    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??

  • Juan Sbraylin Diaz

    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

      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.

  • Alfonso Valencia

    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; ????

  • Silvestre Alejandro Santiago M

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

  • Jose Hernandez Molina

    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

    • Audrey Moguel

      Hola, en el código html en la parte donde dice href=”#” en vez del # pones el otro archivo html.

      CÓDIGO DEL EJEMPLO:
      /* Inicio */
      LO QUE QUIERES HACER:
      Inicio

  • IVAN GIOVANNI VAZQUEZ ROMERO

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

  • IVAN GIOVANNI VAZQUEZ ROMERO

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

  • Miguel García Solis

    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

  • Ezequiel Savedra

    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?

  • Javier Rosales Caballero

    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.

  • Monserrat

    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

  • Alex Ao

    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.

  • Matías Nicolás Valdés Garrido

    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?

  • Erne Full

    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?

  • Ramon Cristancho

    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!

  • SinTapujos

    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 / /

  • Emiliano Torres

    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.

  • David Faro

    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.

  • Kerem Paredes

    Graciaaaaaas! muy útil! :D

  • Rauk

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

    • Areli Hernández

  • JINU

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

  • Julio Andres Ortegon Mejia

    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

  • Julio Andres Ortegon Mejia

    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

  • Arturo Arguelles

    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

  • Jesica Mangiaruga

    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!!

  • 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

  • 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#

  • Jonathan Champitt

    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.

  • Gabi Fernanda

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

    • Gabi Fernanda

      Hablo de una publicidad de 160 x 600 vertical. Gracias


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso