Como hacer un menú de navegación desplegable con Animaciones CSS3

En este tutorial aprenderás como crear un menú de navegación desplegable utilizando unas geniales animaciones con CSS3 que nos permitirán tener un increíble menú.
🚀 Blog de diseño web:
www.falconmast...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
♦ Tutorial escrito, recursos y códigos;
www.falconmaste...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmaste...
♦ Curso patrocinado por okhosting:
www.okhosting.com

[@KronchSteven]

Falcon la verdad mis respetos para usted, tiene una manera tan sabia y comprensiva de explicar las cosas con un interés de enseñar las cosas y la verdad le doy las gracias por todos tu vídeos...

[@FalconMasters]

kronch steven Muchas gracias

[@itsarth2410]

FalconMasters Eres grande hermano, no se como decirlo pero eres fantastico

[@itsarth2410]

FalconMasters Te lo agradeciera si me hicieras este favor podrias mandarme el link de descargar del proyecto..Provafor lo hice todo pero no me sale como tu lo hisiste por eso.?? PLIZZ

[@KronchSteven]

Arthur en la pagina de Falcón aparece el documento en la descripción de su vídeo dice de ir a su página por recursos etc..

[@itsarth2410]

kronch steven Ya dejalo lo e soluciona a la segunda vez

[@aramendi2006]

Saludos, para los que tienen problemas al momento de desplegar el sub-menu, el problema esta en el overflow: hidden; que esta dentro de nav > ul{}, yo lo tuve que eliminar y sustituirlo por un opacity: 0; en nav > ul > li > a span{}, y luego activarlo de la siguiente manera nav > ul > li > a:hover > span{ top: 0; opacity: 1; }, tambien logre que quedara el sub menu vertical, se modifica un poco el esquema del código pero funciona en todos los navegadores y mantiene el efecto. Muchas gracias por compartir tus conocimientos con nosotros los que aun estamos aprendiendo Carlos Arturo, suerte y sigue adelante.

[@andresrodriguez2965]

¿Disculpa podrías pasarme el código?, es que voy a usar este nav en un proyecto escolar y me gustaría que el submenu se desplegara verticalmente. Gracias de antemano y ojala respondas pronto :#

[@josedavidtortolero5362]

Tuve problemas al visualizar en Chrome, pero revisé tu página web e hice los cambios que indicaste en el código. Me funcionó tal cual el video...

[@Feasiel]

Eres muy buen teacher amigo Falcon, tenía el error y lo pude solucionar gracias a tu gran idea de subir la solución a tu página personal. Ahora si no me quedaron dudas. Sigue brindando el excelente servicio educativo que ofreces. Por lo que dicen abajo de que hablas rápido, te aconsejo que no hagas caso a comentarios que no suman. entiendo que lo haces por cuestiones de duración de vídeo. Dios te siga bendiciendo con tan gran habilidad.

[@cesarolaya9052]

gracias falcón usted sabe mucho hermano lo admiro bastante, para los que no han podido hacer lo de los iconos solo tiene que poner este codigo y dejar el archivo de los iconos sin carpeta solo en la carpeta del proyecto

[@edjerher]

Hola Carlos, he seguido su curso de html y css y me tiene impresionado que una persona tan joven sepa tanto y lo pueda explicar de manera tan pedagógica. Felicitaciones. Otra cosa: podría dejar el link de los códigos para no tener que dar tantas vueltas para encontrarlo. Muchas gracias desde Colombia y ojalá continúe realizando tutoriales y cursos.

[@rafaelborbon7382]

No se me oculta el span tan pequeño como el de tu tutorial y utilizo correctamente tus indicaciones: nav > ul > li > a span{ background: #174459; display: block; height: 100%; width: 100%; left: 0; position: absolute; top: -55px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;

[@chisathot750]

Es necesario repetir tantas veces el *nav > ul > li > ul* ? no puedo meter todo en uno solo?

[@jhonmariopadronbarraza2586]

Falcon lo felicito a usted y su metodología de enseñanza

[@oscarvazquez342]

Excelente ,amigo. Tuve muchos problemas por que mezcle este menu con flexbox pero ya va quedando. Mil gracias!

[@joselourido06]

FalconMasters, eres un excelente tutor, gracias por no ser egoísta con el conocimiento.

[@ranierorisquez8573]

Explicado de forma fácil y sencilla. Tus vídeos son muy útiles y agradables. Un Gran Maestro.

[@mrzetim1]

Bueno el tema si señor....seguiré de cerca tus enseñanzas.

[@aylenmenichetti6579]

A mi también me paso eso de no poder visualizar los iconos. Los errores mas comunes y los que tuve son: - Error en la ruta del archivo CSS(despues intente poner la ruta completa, o poner "./fonts.css") -Al programar en un entorno que no era sublime text2, (Por ejemplo yo Aptana) cuando ejecutaba(en Run) no se visualizaban, pero cuando abría directamente el archivo index.html en el explorador si se me mostraban. -Navegadores desactualizados. Estan geniales tus videos.. Muchisimas gracias :D :D

[@nocturno7887]

Bueno me surgió el problema en chrome y pude solucionarlo, gracias compañero, muy útil.

[@danlleloalva]

La verdad pensé que no lo haría , pero tu explicasion fue buena y lo termine :D gracias desde Trujillo Perú un saludo y bendiciones gracias. :D

[@FalconMasters]

SPREE DJ Pues Excelente! :D

[@ramonmonzones8511]

gracias gracias amigo, he visto tu vídeo y en realidad tu trabajo merece todo el agradecimiento del mundo, por compartir tu experiencia a las personas y ayudarlas a crecer, tuve algunos problemas con la codificación pero al final con una buena revisión todo perfecto, gracias de nuevo y a seguir aprendiendo con tus vídeos. P.D. : Si es posible para las personas nuevas en esta área (como yo) te recomendaría y pediría explicar un poco cada codificación y que función cumple, del resto inmejorable gracias de nuevo.

[@thesilentcat]

wow deberías ser maestro, explicas muy bien , te lo agradezco mucho me has salvado, eres muy bueno sigue así

[@enosnoeyaurivillanueva3937]

Me gusto el vídeo y en la forma como lo explicada cada código que escribe, gracias me salió igual el menú.

[@alejandromagno508]

amigo mil gracias, tu canal me ha ayudado a mejorar mis trabajos.

[@samuelvera5150]

nav > ul > li > a: hover > span ledi un espacio de mas y no me quería funcionar el hover

[@claudiosaiz6886]

ERES UN GENIO. MUCHAS GRACIAS POR COMPARTIR. SUPER CLARO Y ENTENDIBLE

[@alexConA]

No olviden guardar ambos documentos. Excelente tutorial

[@jordanaran9241]

Que excelente manera de explicar el código, le entendí muy bien, muchas gracias por el vídeo. Estoy trabajando en un proyecto web, y me basaré en tu material para apoyarme, muchas gracias!

[@hermespelaez2953]

Mucha ayuda... Lo voy a introducir a mi sitio... sigue adelante!!!

[@AntonioMac1000]

Muchas Gracias Falcon, tenia que hacer un menu con el efecto de transicion css3 y adapte a mi propio diseño, pero me sirvió bastante la base de código con los span icons! Muchos exitos. Saludos desde Perú

[@fernandoparraga1497]

quiero felicitarte por tu gran trabajo y tus grandes explicaciones creeme me han servido mucho me parece que tienes talento para hacer todo esto. mil felicitaciones

[@gregorismenor]

Una duda, olvidaste explicar como cambiar el color de la transcision de los submenu, he intentado pero no he podido, y quisiera poner los submenu hacia abajo, osea, item #1 abajo, item #2 abajo de item #1 no al lado, y asi sucesivamente, muchas gracias

[@cokenaUAA]

Amigo muchas gracias, me ayudo muchísimo tu vídeo, hice mi menú :) solo le hice unas modificaciones ya que lo pude por debajo de un header. Te agradezco por tus vídeos. Saludos.

[@hectorramos5632]

Excelente tutorial, ya había hecho todo y me salia error pero ahora vi tu pagina y allí estaba la solución, el único problema que tengo ahora es que no me sale el icono-house cuando despliega el menú...

[@32yuiman]

Muy buenas. Disculpa el vídeo está bastante bien y me ha ayudado mucho, hay un error en el icon-house, en la línea 14. Debería ser icon-home. Gracias por los vídeos están bastante bien.

[@espirituacustico]

Te felicito por tu trabajo!!! bien explicado y muy buena dinámica. Agradecimientos totales! Eres un excelente maestro a pesar de q te escuchas muy chavo. Saludos!

[@rivasjayo]

Hola, Carlos. Muchísimas gracias por tus cursos, gracias por toda tu dedicación; ¡eres asombroso!

[@FalconMasters]

Muchas gracias, me esfuerzo por enseñar lo que se

Felicitaciones Falcon, se nota que conoces a fondo el tema, excelente video, totalmente didáctico

[@erikmujica9848]

Explicas muy bien y lo haces muy comprensivo, realicé este menú y funciona a la perfección pero al momento de verlo en una tableta se desalineay la animacion no funciona. Se puede realizar que este menu collapse para estos dispositivos.

[@johanquintero8560]

Uno de los mejorws programadores que e visto grasia maestro

[@martincurvale2031]

Cuando hago el nav > ul > li > ul para que me desaparescan los sublinks de la barra simplemente no pasa nada me queda la primer fila de entradas la segunda y la tercera

[@rcuevasr11]

Quiero felicitar con mucho respeto y agradecimiento al personal de FalconMasters, es increíble lo que están haciendo por personas que no hemos tenido la oportunidad de contar con una tutoría a este nivel, son muy buenos en lo que hacen, así que estoy muy agradecido y que Dios les siga iluminando el camino para sigan haciendo esta labor, Dios les bendiga grandemente. Solo tengo una preguntita, en el curso de Diseño Web, cuando creamos un articulo y este tiene un contenido amplio, no lo podemos mostrar en un marco, ¿Podemos ponerle un link de Ver Mas o recomiendan otra técnica o es que es recomendable con un Scroll para ver todo el contenido de ese articulo, además de alguna herramienta para aumentar el size cuanto la fuente no es legible para algunas personas? Gracias! Santo Domingo, República Dominicana.

[@FalconMasters]

Hola Ruben, muchas gracias por tus bendiciones, la verdad es que solo soy yo el que administra de momento el canal FalconMasters pero si que me esfuerzo por tener buen contenido de utilidad, muchas gracias por ver el contenido, de verdad. Sobre tu pregunta, lo que pasa es que ese curso solo es de diseño web, para agregar contenidos necesitas un gestor de contenidos, un CMS, como wordpress. Si que puedes usar un scroll para el contenido, siempre y cuando no sea exagerado, y sobre el size de la fuente, por defecto suele ser de 16px, pero puedes cambiarlo a mas si cres que se requiere. Saludos

[@rcuevasr11]

Oh! es que todo está tan bien estructurado que creí que era un equipo de personas. FELICIDADES y gracias nuevamente. Soy programador de Visual Basic y esas cosas de Visual Studio, pero ya he decidido hacer algunas cosas usando un buen diseño, a la verdad me ayuda mucho tu trabajo .

[@chicopow]

Excelente de verdad me ayudara mucho para mi proyecto de la uni Dios les bendiga y gracias por compartir.

[@darianabracho2646]

¡Explicas muy bien! Gracias.

[@alexcarvajal2410]

(maldicion no me di cuenta que al conectar estilos.css lo habia echo en ingles por eso no me funcionaba) en fin eres un pro amigo me gusta como explicas

[@ing.williamcordovez8183]

Excelente tu forma de Explicar. ya estado haciendo el tema en responsive de wordpress y los demas videos. muchas gracias.

[@josuedanielflores2008]

Bastante bueno el tutorial. Se agradece muchísimo

[@juanzorrilla8861]

Hola admiro mucho como te desenvuelves explicando las cosas, felicidades y gracias

[@KaizerHind]

Me gustan los cursos de este muchacho. Aunque a veces es complicado encontrar un Tutorial de como agregar solamente 'x' cosa, sin tener que re-crear un menú de 0%, para terminar quitando el tuyo. xd

[@aylenmenichetti6579]

Estan geniales tus videos.. Muchisimas gracias :D :D A mi también me paso eso de no poder visualizar los iconos. Los errores mas comunes y los que tuve son: - Error en la ruta del archivo CSS(despues intente poner la ruta completa, o poner "./fonts.css") -Al programar en un entorno que no era sublime text2, (Por ejemplo yo Aptana) cuando ejecutaba(en Run) no se visualizaban, pero cuando abría directamente el archivo index.html en el explorador si se me mostraban. -Navegadores desactualizados.

[@ck8x22]

Gracias Viejito, me ayudaste bastante, ademas entendi muy bien en que consiste la relación de HTML con CSS, me suscribo.

[@gpacheccgpachecc9357]

consulta, cual es la diferencia entre nav > ul > li > ul y nav > ul li ul . Gracias de antemano.

[@samuelramosDRS240815]

excelente vídeo FalconMasters me ayudo muchísimo justo lo que necesitaba.. solo tengo una pequeña duda yo lo trabaje en DW cs5 y no me muestra los iconos de el menú principal al visualizarlo en el navegador chrome solo eso pero igual muchas gracias

[@FalconMasters]

Para todos los que tengan problemas con los iconos, aquí esta otra forma nueva de usarlos. kzbin.info/www/bejne/pqaagYathJWSj6s

[@ivanorozco314]

FalconMasters Los codigo sirven en dreamweaver?

[@luisortiz6018]

Buenas tardes, hermano muy bueno tu turorial, hice todo bueno casi todo, pero no pude meter los iconos y eso que los baje y los puse aparte en la carpeta pero no me quiso funcionar por lo demas si me funcionó, ya en cualquier momento lo termino quiza algun error que cometi, pero esta muy bueno este menu y muchas gracias por tu aporte un abrazo.LuisOrtiz desde Venezuela

[@sergiosalazar7231]

Gracias, parcero. El tutorial está repiola.

[@ragnarok_tz]

Hermoso menu. Muy buen video para practicar los conocimientos de css. Gracias por compartir

[@ivanr.valdivia6569]

asu genial el video falcon eres un maestraso buen aporte para los diseñadores

[@ABMisterPisos]

Muy buenos cursos os felicito, sois muy buenos saludos

[@juancamilotobonquesada717]

Amigo una pregunta como hago para que el submenu quede en forma vertical?

[@juandaniel8139]

Display: block, pero lo aplicas .submenu ul

[@d-landjs]

Excelente, me gusto mucho este menu, si que hay muchos conceptos por aprender!!

[@estebanalmanza6233]

Amigo el tutorial más efectivo y claro que he visto en mi vida. Lo he realizado y me ha salido de maravilla para todos los navegadores a excepción de Chrome. Sabrías como arreglar eso? el problema que tiene con Chrome es que el sub-menú al momento de de pasar el mouse no me aparece =( Continúa. Éxito.

[@FalconMasters]

Si que existe un problema con chrome, la solución ya la he puesto en mi sitio web, revisala y con esto te funcionara en chrome también :D www.falconmasters.com/tutoriales/menu-desplegable-animaciones-css3/

[@estebanalmanza6233]

Corregido y funcionando al 100%. Muchas gracias =D

[@FalconMasters]

Esteban Almanza Excelente!

[@zion2st2.05]

Muy bueno falcón!!!!!! Sos un maestro espectacular

[@PLGuille]

Me gustaría utilizar esta barra de navegación, pero justo debajo del título de mi página. He probado a cambiar la posicion de todo el pero entonces la animación falla. Qué puedo hacer?

[@carlosalbertovizcainogarci3379]

Gracias mi estimado, me sirvió mucho para identificar los códigos para menús y displays... saludos

[@topx777]

Falcon siempre aprendo algo nuevo contigo gracias, de verdad muchas gracias por compartir esto con nosotros!

[@photosintesis5420]

viendo tus videos en 2020 grande

[@misterbuffin]

Hola Falcon, como hago que el submenu salga de modo vertical??.. Hacia abajo.

[@alejandrodiaz7028]

hola... estuve mirando este video y me parece interesante, pero quisiera saber cómo hacer para poner varios carks debajo del nav y que el cursos al pasar por encima se deplieguen las opciones sobre los cark y que no me los mueva hacia la parte inferior !?

[@PatMr93]

Muchísimas gracias por tus tutoriales. Me ha ayudado mucho con el problema del menú desplegable. No obstante, quería combinarlo con la propiedad responsive de las nuevas webs, pero cuando modifico el tamaño de la pantalla desaparece mi menú. ¿Podrías darme algún consejo?

[@HEAVYMETAL80tas]

Hola, primero que todo te agradezco mucho por los tutoriales gratuitos que publicas. Respecto al menú tengo una pregunta: cómo harías para que por ejemplo al hacer click en contacto, se mantenga su estado sobre (es decir, que el ícono no vuelva a subir). Otra pregunta ya directamente sobre el ejercicio realizado: por qué en el css en "nav", defines un margin:20px auto, para luego anular esos 20 pixeles con un margin-top:-20? Agradezco tu respuesta y de nuevo gracias por compartir tus conocimientos (Y)

[@jinrobertz]

suscrito amigo, me han servido en verdad tus videos hoy me avente pero mañana sigo con las clases jeje saludos.

[@williamjosegarciaroca8266]

Hola, gracias por el tutorial, está realmente muy claro... una consulta, si en lugar de hacer el menú desplegable en horizontal, lo deseo en una fila, por ejemplo debajo de la opción servicios tener un menú desplegable con 7 servicios uno debajo del otro, gracias por tu ayuda...

[@jaimesandoval9408]

Muy bueno amigo. Aprendo mas gracias a ti gracias por compartir tus conocimientos

[@Alanbm_]

es lo mismo hacer, este codigo en note pad ++, bloc de notas etc ??

[@rockstar9514]

Hola que tal, oye me podrías decir como le hago para que el menú brinque algunos espacios hacia abajo, porque quiero poner una imagen superior y luego mas abajo quiero poner el menu, me podrías decir como porfavor.... Explicas súper bien en el tutorial!!! Gracias

[@mistralvideo]

Muchas gracias por tu tiempo. En este capítulo, Podrias indicar como poner los subtitulos en vertical?, sería de gran ayuda. Un saludo

[@mistralvideo]

Solucionado linea 34 (dentro de nav > ul > li:hover > ul{ display:inline-grid;} y los submenús en vertical

[@johannpolancoleal9765]

Excelente todo tu trabajo , mis respetos, solo quería preguntarte a pesar de hacer paso a paso lo que me comentaste lo único que no visualizo es la transición , sabes cual podría ser el problema?

[@Eloiby]

Felicitaciones amigo! grandioso tutorial.....es un gran aporte para la comunidad!

[@FalconMasters]

Muchas gracias :D

[@sandraloorcapsulasdepsicologia]

Es verdad, es un buen maestro. felicitaciones.

[@cynthiadan1]

Hola hice tu menu y esta bien padre solo tengo una pregunta si tenemos mas de un sub menu como le cambiamos el color al pasar el raton

[@wilsonortiz3961]

Buen dia Falcon, muchas gracias por el tutorial, esta excelente, pero el menu sale muy bien en Firefox y en internet explorer, no obstante en Chrome y Opera, solo me salen los iconos y el encabezado, ya revise los prefijos y los tengo como en el video. Muchas gracias por su atencion

[@miguelapacheco1736]

hola estuvo muy bien el vídeo y lo único que quería saber en como le podría agregar un sub-menu al sub-menu para que también se despliegue agradecería mucho tu respuesta gracias

[@bruno5094]

wuo exelente visitare tu sitio.... fasinado

[@albertobressan7625]

hola , bellissimo video "!!estoi busando un viedo tuyo que tenia este menu y un menu echo con iconos de social en el lateral izquierdo ! no lo encuentro !! .. de todaforma te digo MUCHISSIMAS gracias por tu canal youtube que me ha ayudado muchissimo en aprender por lo meno lo basico del CSS !!

[@johannaandraderivera2908]

Buen video, muy buena la explicación, solamente que quisiera saber como dejar los items de forma vertical al seleccionar cada opción, gracias

[@PabloOlivare]

Grandioso video, logre comprender un montón de cosas gracias a este video! Ahora tengo una duda. Si debajo de esta barra tengo un , como puedo hacer para que cuando se despliega el submenu, este div de mueva hacia abajo en vez de quedar estatico y debajo del submenu? Muchas grecias de nuevo por este y todos los demas videos, luego comienzo con java :)

[@FalconMasters]

Si te entendí bien, lo que tienes que hacer es encerrar este menu en un div y a este div ponerle un position fixed, revisa este tutorial, me parece que es como lo que quieres hacer. www.falconmasters.com/web-design/tutorial-menu-de-navegacion-fijo/

[@ignaaguila4858]

muy bueno amigo..tengo una duda como puedo hacer que el menu se quede mostrando la ruta de las paginas a las que e entrado digamos tengo uno vertical y se depliega y luego se quede marcado ai para ver donde me encuentro ..saludos

[@jerry_trejo_design1639]

hola una pregunta por que al estraer la carpeta de icomoon tambien viene archivo .js ese seria para bootstrap?

[@lordgs1569]

Sale man muchas gracias por el video checare tu pagina y me adentrare en esto

[@barlok182]

Exelente Video Falcon, me funciono a la perfección, pero quería saber si podia modificar la posición del sub menu, que quiero decir , si en vez de que salga apegado a la izquierda el submenu se puede alinear al centro o a la derecha

[@angelicarodriguez611]

Hola, muy bueno tus videos. Pero tengo una duda yo estoy haciendo dos submenús y sigo todos tus paso paro que puedo hacer para que se me desglosen los en otro submenú, ya que solo se me desglosa uno siguiendo tu codificación.

[@johanlobaton846]

Gracias,tu video me ayudo bastante suerte.

[@freesgen]

Excelente video bro,me ayudo mucho!! en las anotaciones de CSS en vez de usar "nav > ul > li > ul " seria mas cómodo llamarlos por clase xD yo lo hice asi

[@leocore77]

Hola Maestro!!.. como siempre seguí todas sus instrucciones y me quedó tal cual como el del ejemplo.. pero tengo una consulta.. necesito implementar este menú en un sitio donde el menú no está pegado en la parte superior ("top:0;") sino que está abajo de una barra con logo, y datos... intenté aplicarlo dentro de una barra div pero no se adapta de forma correcta ya que no se ocultan los cuadros de los botones con los íconos.. de hecho no logro hacer que entre en la caja de div.. sí está en el código, pero visualmente sigue fuera.. Como siempre mi agradecimiento respetos a su gran sabiduría y esperando su pronta respuesta se despide Leo!

[@israel_banks9024]

Hola Carlos, muchas gracias por los cursos y todo, podrías decirme como centro el sub-menu? en el código se inclina hacia al lado izquierdo y necesito que abarquen toda la línea

[@albertoramirez8830]

Tengo una pregunta como puedo pasar el menu hacia abajo ya que quiero anteponer una imagen en la parte de superior es decir antes del menu y cuando modifico el estilo del menu este muestra el menu mas los iconos y solo se muestra el efecto del submenu gracias espero puedas ayudarme

[@alicehime0412]

en el comando nav > ul > li > ul { display:block; position:absolute; background: #000; no me arregla el menu desplegable y cuando paso el cursor por la opcion que tiene el menu desplegable no aparecen las opciones de abajo de (item#1....) en el video esta en el minuto 23:33

[@canadafendernick51]

Me gusto tu video amigo ❤un abrazo fuerte ✌🏼

[@FalconMasters]

Gracias! Me alegra que te gustara. Saludos!

[@monicacastillo3139]

Hola esta muy bien tu video muy bien explicado .. pero la pseudo clase hover no me funciona estoy usando dreamweaver y al momento de poner el mouse encima no sucede nada. espero me puedas ayudar Gracias

[@lucasmanoguerra7301]

hola me preguntaba como puedo hacer si ell sub-menui tiene muchas opciones y se sale del ancho del manu como puedo hacer para que esas que se salen del ancho del menu se acoplen debajo ya que tengo que tengo que colocar 25 sub-menus

[@mariochavesvillarreal451]

Hola muchas gracias por tus cursos. Mi pregunta es como puedo que mi submenu con este estilo se despliegue de manera vertical.

[@patrickacosta8283]

la transicion de nav > ul > li > ul{} no me funciona en el navegador chrome y su en firefox y eso que tiene su prefijo

[@MHAROLD22]

tal como veo los iconos lo ocultas con el header, lo colocas arriba por eso solo se ve una linea.. saludos