Crea un Menú Horizontal Responsive con CSS Flexbox Muy Fácil.

En este vídeo te voy a mostrar cómo poder hacer un Menú Horizontal Responsive con CSS Flexbox, usando un poco de Vanilla JS. Sucríbete para más vídeos como éste. :)
-------------------------------------------------------------------------------------------
ACCESO AL CÓDIGO FUENTE EN MI PATREON: / lexterxps
Sígueme en Facebook: / xpstutoriales
E - mail: [e-mail]
No olvides dejar tu Like y compartir para seguir creciendo. :)

[@stivenquiroz6904]

para la gente que no entendió el js, esta es otra opción mucho mas fácil. 1. (en el html) donde tenemos la clase *class="menu-items"* vamos a agregar un id, id="otroModo" donde tenemos la clase *class="btn-menu"* vamos a agregar un evento al darle click, onclick="showmenu()" 2.(en el javaScript) haremos una función (la que tenemos en el onclick). function showmenu() { document.getElementById("otroModo").classList.toggle("show"); } solamente es que va a ir al documento y va a buscar el id llamado *otroModo* y si tiene la clase show se la quita y sino la tiene se la pone.

[@LexterDev]

Es otra alternativa, gracias por el aporte.

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/m2XNppKDfp6lgbM

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/m2XNppKDfp6lgbM

[@lucianorayone]

lightbox.min.js:14 Uncaught TypeError: Cannot read property 'css' of undefined at b.start (lightbox.min.js:14) at HTMLAnchorElement. (lightbox.min.js:14) at HTMLBodyElement.dispatch (lightbox-plus-jquery.min.js:559) at HTMLBodyElement.q.handle (lightbox-plus-jquery.min.js:549) ME SIGUE APARECIENDO ESTO CUANDO CAMBIO DE FOTO SABES COMO ARREGLARLO?

[@oscarsernacarvajal7284]

Eres un Crack, me sirvió mas que todo el tutorial junto jajaaja

[@fernandorochaolivera2404]

Eres excelente, a parte de usar buenas prácticas explicas muy bien. Muchas gracias

[@LexterDev]

Gracias bro! Espero te haya servido el vídeo. Un saludo 👋

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/m2XNppKDfp6lgbM

[@krislj]

Porque no usas header>h1/nav>a sin ul ni li

[@jezzarte3587]

¡Muchas gracias! Me sirvió muchísimo ♥

[@chaksite]

Gran video amigo!!, Tuve problemas con el JS pero después de checarlo con tu vídeo ví mi error y lo pude solucionar xD Eres un crack!!!

[@fabiolomadurogarrafa6751]

aw3o nao nunca hay chp4o z0 r r0

[@danielrochabartaburu2428]

Hola, acá les dejo mi solución, ya que la del tutorial no me funcionaba. (en el html el src al js lo deje como archivo.js), al const del js lo cambié por var y ualá!, espero le sirva a alguien más, saludos!. Y muchas gracias por el Menú! window.onload = function() { var btn_menu = document.querySelector('.btn_menu') if (btn_menu) { btn_menu.addEventListener('click', () => { var menu_items = document.querySelector('.menu_items') menu_items.classList.toggle('show') }) } }

[@javiergaitan7406]

Genioo

[@djandresvelasco8253]

muchas gracias funciono perfecto! ya me estaba dando por rendido!

[@jeanfrancoromerocalvo5207]

geniooo

[@danielabetancur4280]

gracias crack.. estaba triste porque no funcionaba

[@unicorniodefiesta920]

es muy interesante tu video, pero me gustaría aconsejarte que cada vez que haces un cambio guardes y muestres que es lo que haz hecho ya que muchos nos perdemos si no sabemos cuales son los cambios que has hecho

[@LexterDev]

De acuerdo, lo tendré muy en cuanta para futuros vídeos. Gracias por el feedback. Un saludo.

[@unicorniodefiesta920]

@@LexterDev una pregunta cuando uso el .menu_item{ display: flex; list-style: none; margin-right: 30px; } con una lista de 4 elementos no pasa nada, no se aplican los cambios, pero si agrego uno mas automáticamente se aplican los cambios, por que pasa eso?

[@fabriciogomez8057]

cuando lo hago responsive el background de "INICIO" no abarca todo el width de la pantalla este es mi codigo css. Dice menu-inicio porque es para la pestaña inicio .menu-inicio{ position: fixed; z-index: 2; background-color: rgba(0, 0, 0, .7); height: 75px; width: 100vw; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #fff; box-shadow: 5px 0 10px rgba(0, 0, 0, .9) } .logo{ color: #fff; font-size: 35px; padding: 0 80px; font-weight: bold; margin-bottom:10px; } .menu_items{ display: flex; list-style: none; margin-right: 30px; margin-top:18px; } .menu_items li{ border-radius:3px; margin: 0 5px; } .menu_items li a{ padding: 7px 13px; text-decoration: none; font-size: 18px; display:block; color: #fff; } .menu_items li:hover, li.active{ background-color: rgba(0, 0, 0, .3); transition: .4s; } .icono{ width: 26px; } .btn_menu{ margin-right: 30px; color: #fff; cursor: pointer; display: none; } ul.show{ top:50px; } @media screen and (max-width: 952px){ .logo{ font-size: 30px; padding-left:35px; } .menu_items li a{ font-size: 16px; } } @media screen and (max-width: 858px){ .menu-inicio{ height: 65px; } .btn_menu{ display: inline-flex; } .menu_items{ position: fixed; width: 100vw; height: calc(100% - 65px); background-color: rgba(0, 0, 0, .5); top:-100vh; text-align:center; transition: all .4s; flex-direction: column; } .menu_items li{ margin:10px 50px 0 0; line-height: 30px; } .menu_items li:hover{ background: none; } .menu_items li a{ font-size: 20px; color:#fff; } .menu_items li a:hover{ background-color: rgba(0, 0, 0, .1); } .logo{ font-size: 25px; padding-left: 35px; } } @media screen and (max-width: 858px) and (orientation:landscape){ .menu_items li{ margin: 5px 0 0 0; } .menu_items{ overflow: scroll; height: calc(100%- 65px); } }

[@juandavidagudelo2804]

Cumplo mis promesas y el video me gusto y me fue de muchisima ayuda, nuevo sub y toma pedazo de like

[@AltoViajeBlog]

Hola, tengo una duda. Me salió bastante bien pero el botón de menú y el logo no quedaron posicionados igual que en tu video. Quedan más centrados y a medida que achico la pantalla, se van acercando hasta juntarse. Dónde puede estar el error y cómo lo corrijo? Gracias.

[@LocoCraft15]

MUCHÍSIMAS GRACIAS ÍDOLO TE GANASTE UN NUEVO SUB DE POR VIDA

[@adrianvazquezhernanadez2173]

Excelente hermano, gracias por el tuto, he salido de un apuro.

[@robertobaldizon8206]

Muchas gracias. Aprendí mucho con este videotutorial. Saludos.

[@LexterDev]

Qué bueno, me alegra saber que te sirvió mi vídeo. Un saludo 👋

[@magalyriera]

Muy buen tutorial muchas gracias por tu ayuda y espero seguir viendo vídeos tuyos saludos

[@LexterDev]

Qué bueno que te sirvió, un saludo :)

[@santiagoooooo]

Para los que no les funciona el boton en celulares, deben de importar su archivo de js en su html, a lo mejor para muchos esto es obvio, pero para los que estamos empezando es enredozo, se importa de la siguiente forma: Vas a tu html, una linea antes de pones la siguiente etiqueta

[@medardomanuelmaldonadohurt6600]

Muchas gracias simplemente agradecido, lo necesitaba. :)❤❤ Tienes tu like y mi suscripción.

[@diegohernansalamida6343]

Excelente el tutorial. (Un poco de 'zoom' sobre el IDE para ver el código si usar 'pantalla completa' ). Qué sigan los éxitos.

[@LexterDev]

Lo tendré en cuenta bro. Un saludo 😁

[@gines427]

Simple y facil. Gracias brother

[@tv-central6571]

hice todo tal cual pero no me muestra la imagen del boto. al minizar el menu desaparece

[@jav3169]

Hola, como haria para implementarlo en React? saludos!

[@frontsitodevZ]

el js solo le da ese efecto de arriba hacia abajo, porque quiero ponerle sin js

[@brianarce4873]

hola que tal, tengo el siguiente problema. queda todo perfecto pero al momento de querer desplegar el menu en la vista mobile no pasa nada, alguien sabe por que puede ser?

[@FernandoHernandez-pz9im]

Muy buen video ! me funciono y no me enredo tanto entenderlo

[@fabrizioalpuche5984]

buenísimo el tuto!!

[@danielo2751]

excelente tutorial, muy bien explicado.

[@tv-central6571]

como puedo sustitu ir la etiqueta label con el texto y en su lugar poner la imagen de un logo, y que funcione igual a texto que se adapte a los tamaños etc

[@LexterDev]

Bastaría con jugar con CSS y ajustar la imagen de acuerdo al tamaño de pantalla con Media Queries

[@lorenzobetancourt8330]

Amigo yo hize todo lo que hiciste tu y al darle al botón desplegable no sucede nada: Ya declare la dirección del java Copie lo mismo que en tu vídeo el app.js No se que pasa ayudarme por favor porque no funciona

[@luis678678]

solo cambia el nombre de las contantes addEventListener("DOMContentLoaded", () =>{ const btn-menu = document.querySelector('.btn_menu'); if(btn_menu){ btn_menu.addEventListener('click', () =>{ const menu-items = document.querySelector('.menu_items'); menu-items.classList.toggle('show'); }); } });

[@antaresrangel3890]

me pasa lo mismo

[@MarcelodeCalafate]

Excelente!! Gracias por el aporte. Atento a tus post

[@vjpadron07]

Buenas noches he hecho tu video tutorial está muy interesante pero he tenido dos problemas, resulta que cuando uso el chrome, no me separa dichos elementos del menú y tampoco me pone ni el botón ni las letras en mayúsculas. Se me pasó por la cabeza, de poner el safari, ya que lo hice dicho tutorial completo, en mi portátil Mac OS X versión 12.2.1 Monterey. Y en éste sí me hace todo pero cuando le doy al botón para mostrar el menú responsive en pantallas pequeñas no me hace nada. Incluso copié al pie de la letra el fichero app.js, que ahí la verdad me perdí un poco, pero no hace nada, tanto en Safari como en Chrome. Me podrías decir a qué es debido. Muchas gracias y buenas noches.

[@orleysalgadoortega1041]

Amigo como hago para que en vez la barra del menu, pase por debajo de la barra roja y no por encima como tienes en el video, muchas gracias.

[@LexterDev]

En ese caso juega con el z-index bro, ponle uno más alto al menú en móviles.

[@lucianorepetti48]

@@LexterDev no sirve. 😠 Alguien como tu debería saberlo no?

[@andreamartinezarias6387]

Hola tengo una pregunta me funciono todo super bien pero cuando hago la vista mobile y se me desplega el menu ya no me funcionan los links a las otras paginas que puedo hacer

[@karlitosForever22]

Amigo tengo un slider y cuando desplazo mi menú en el tamaño de un celular de desplaza detrás del slider, espero me puedas ayudar.

[@manuelraquejo4571]

NO ME SIRVE EL FA FA-BARS Y NO ME APARECE LAS TRES LINEAS, POR QUE PASA ESTO? :(:(

[@neusoficial]

no explicaste lo de font awesome :(

[@nicolasvaldes2505]

Hay alguna forma que hacerle click a alguna de las opciones en responsive esta hoja se levante de nuevo para mostrar la pagina? Saludos!!!

[@gines427]

bro una consulta. cuando despliego el menu en un celular y scrolleo se queda todo raro. como que falta una parte de arriba, se puede solcuionaro

[@cesargfx4029]

alguien que me pueda ayudar en lo de fa fa-bars? no me aparace las tres lineas

[@LautaroLorca]

Hola buenas,de donde puedo sacar el js para los 3 puntos?

[@LexterDev]

En realidad no es JS, los 3 puntos son HTML y CSS. Ahora, la funcionalidad cuando das clic sí es JS. No sé si te refieres a eso?

[@facundotrejo2160]

No me sale el icono con la etiqueta i y la clase fa fa-bars. Ayuda :(

[@salletob]

Abandono. siempre que llego al final aparecen los problemas. van varios

[@bashita159]

muy buen video, me tuve que devolver 100 veces pero excelente

[@javizame]

Te puede interesar este video también: kzbin.info/www/bejne/m2XNppKDfp6lgbM

[@idanigarzon]

Vi que agregaste una clase llamada show en CSS, pero no vi donde la colocaste en el HTML

[@LexterDev]

Esa la agrego dinámicamente con JavaScript cuando se presiona el botón.

[@aresth8862]

Mire el video completo y me gusto, es justo lo que buscava, solo que una consulta, alguien sabe como hacer que sea el menu flotante, para no tener que suibr y darle clic a los botones, gracias de antemano.

[@Fernando-uc1dc]

tenes que darle una position fixed

[@jeancarloscruzhuanca6518]

position: fixed; z-index: 100; //para q se superponga a otros elementos

[@manuelraquejo4571]

A MI NO ME APARECE EL BOTON QUE ESTA EN EL SPAN :(

[@miguelangelbautistaantonio6077]

Oye bro si tengo una imagen abajo y se traspasa como puedo evitar eso?

[@lucianorepetti48]

Con position: Absolute; Y Z-index: 100. Busca sobre position y z-indez6 y entenderás mejor para futuras prácticas

[@nadiyaklokova8175]

gracias. esta genial

[@josemiranda989]

puede ser que falto importar el js en el html?

[@paulougartemendoza2154]

Hola Lexter, excelente video, cómo puedo tener ese código fuente?

[@rubenguzmangomez7479]

donde puedo descargar el archivo del video?

[@abborgia]

excelente🙂

[@martinreyessereno3327]

me podrias ayudar a adaptarlo a mi aplicacion, solo la parte de los "li, a" no se alinean donde se supone que deberian de ir ayuda por favor.

[@EmprendeRicoEmprendePobre]

Pudiste, sino contame y te ayudo.

[@felixsantana4081]

Excelente vídeo 👌🏻 Y cuál emulador utilizas?

[@LexterDev]

Espero te haya servido el vídeo 😁. Y emulador para móviles uso el que ya viene integrado en el navegador bro.

[@Lautaro.S]

Hola, cuando achico la pagina no se muestra la hamburguesa, puede ser por la resolucion de mi monitor? aun asi, no se ve nunca intente cambiando la resolucion y probando con los pixeles que pusimos en el css en inspeccionar elmento y tampoco, si le saco el display none si lo puedo ver pero no se aplica con las resoluciones del mediaquery

[@LexterDev]

Revisa primero si la fuente de íconos está cargando bien, después revisa donde muestras u ocultas el ícono en el CSS.

[@jeiko334]

Hola buenas noches podrias poner el link del proyecto muchas gracias saludos cordiales buen video

[@jorgetex21]

Excelente tu video tutorial! felicitaciones. Solo una consulta. siempre pensé que el logo tenia que estar en un header por semántica?

[@LexterDev]

Hola! Muchas gracias bro. Y con el comentario es correcto lo que diced, sin embargo depende mucho del tipo de logo que vas a usar, en mi ejemplo si ves es texto puro sin más, por eso va ahí. Igual puedes ponerlo en el header sin problemas para ser más estrictos con la semántica.

[@jorgetex21]

@@LexterDev ok. Gracias por la info. He visto que muchas webs usan imágenes como logo, particularmente svg. Es más recomendable. O sería suficiente logo de solo texto? Con una tipografía linda queda bien. Tu que opinas?

[@LexterDev]

@@jorgetex21 En realidad depende mucho del tipo de logo, diseño e imagen que quieras transmitir. Hay logos más complejos que otros a veces es mejor usar svg o png según el gusto, pero si crees que con sólo texto queda bien y representa lo que quieres, pues está bien también. Como te comento, depende mucho del caso, ya que cada caso tiene su contexto y características propias.

[@AlejandroRamirez-fr3jc]

@@LexterDev yo utilice un png y no me quedo dinámico, quede estático... no supe como hacerlo

[@dreadsean7233]

buen video amigo podrias hacer uno en el que muestres como usar el mismo menu pero en diferentes archivos html, es decir hacer una sola vez el menu y usarlo en otras archivos html

[@sanchezaguileraabigail5520]

Crea un archivo php con la parte del inicio y todo el header. Después incluyes ese archivo en cada uno de los html que deseas ponerlo con ejemplo

[@dreadsean7233]

@@sanchezaguileraabigail5520 necesariamente se debe usar php???

[@sanchezaguileraabigail5520]

@@dreadsean7233 La verdad es la única forma que conozco, desconozco si con puro HTML se pueda, pero en realidad no cambias nada de la estructura interna, sólo porque puedes incluir ahora ese tipo de archivos.

[@weysher]

Hola, porque poner al * after y el before? afecta en algo? y buen video!

[@LexterDev]

Con esa parte lo que se hace es un reseteo de todos los elementos con el selector global, el before y after sólo lo hago porque si los uso también quiero que sean reseteados, pero para fines de este vídeo es irrelevante ya que no uso ninguno. Pero es la costumbre 😅

[@alivs2279]

Buen vídeo man, una pregunta, ¿Vos tenés cursos de CSS, HTML5 y JS?

[@LexterDev]

Gracias! Y sí tengo, pero son clases privadas en vivo que ofrezco bro. Cursos grabados no tengo por el momento.

[@elchochaso]

pregunta como accedo al contenido de los item de ese menu

[@LexterDev]

Mmm no entiendo muy bien la pregunta, si pudieras darme más detalles para poder ayudarte.

[@lucianorepetti48]

Un error grande es el z-index. No se puede poner porque no son los mismos position

[@danielavargas572]

y que se puede hacer?

[@810BYTE]

Gracias, el codigo fuente?, el link?

[@geovanniverabalcazar2541]

Tengo un error en el archivo js en classList of null a htmlspanelement

[@LexterDev]

Habría que revisar si en JavaScript se está seleccionando el elemento HTML correctamente.

[@hermesramirez2398]

Bro, solo me funciona el hover si hago click . Intenté con un codigo de developer mozilla e igual pasa lo mismo :/

[@LexterDev]

No entiendo muy bien tu problema bro, si puedes darme más detalles para poder ayudarte.

[@gastonromano4240]

Hola! Donde puedo obtener el codigo?

[@yeinernaranjo9639]

Nuevo sub :)

[@LexterDev]

Genial, bienvenido bro. 😁

[@jjcg2005]

Cual será el problema? al igual que otros me paso que no se despliega el menu responsive y probe y comprobe varias veces el codigo pero aún así no ví nada raro

[@luis678678]

solo cambia el nombre de las cosntantes , ami me funciono de esa manera addEventListener("DOMContentLoaded", () =>{ const btn-menu = document.querySelector('.btn_menu'); if(btn_menu){ btn_menu.addEventListener('click', () =>{ const menu-items = document.querySelector('.menu_items'); menu-items.classList.toggle('show'); }); } });

[@santiagoooooo]

Mmm si importaste tu hoja de js en tu html? a mi se me había olvidado, después de que lo hice me funcionó

[@kdirrosashinojosa8248]

una ayuda, cuando le doy a inspeccionar no me sale el menu con tres rayitas, me sale normal, cuando achico la ventana si me sale. en q falle '?

[@LexterDev]

Prueba dando inspeccionar, abres el emulador y dale F5.

[@kdirrosashinojosa8248]

@@LexterDev nada, ya revise el código y esta como lo hiciste

[@LexterDev]

Está raro bro, porque si está igual debería funcionar.

[@EmprendeRicoEmprendePobre]

@@kdirrosashinojosa8248 Le agregaste el js de kit.awesome.com ?

[@LiftAndC0de]

hize tal cual pero no me ffunciono el js k raro ni modo gracias

[@manel_torres7]

Buen video, pero no se ve realmente cuando realizas ciertos cambios ya que te quedas casi todo el video mostrando namas el tamaño pequeño de la pagina. Saludos

[@jlopekkos2164]

Con flex box se pueden hacer unas cosas increibles

[@andreyramirez6750]

pueden pasarme le src, del script de fontawesome

[@LexterDev]

kzbin.infoyzaHhecJX-g?feature=share

[@jhonalexandergarzon5113]

para usar flex, hay qye tener instalado algo en el programa de editor code?

[@dono3520]

La respuesta es no. Tu puedes usar libremente flex en cualquier editor

[@LexterDev]

No, es código CSS nativo. No hay que instalar nada.

[@allanmsv7220]

bro esta super perro y todo excelente solo el js no me quedo para nada me manda errores por montones me puedes ayudar por favor

[@antaresrangel3890]

que errores tuviste?

[@Zuleeeification]

No explica cómo poner el icono del menú, empezando por eso ya queda uno perdido

[@LexterDev]

Sí lo explico, uso fontawesome, y lo digo en el vídeo. Fontawesome es la que trae el ícono.

[@HUGOSILVA-ee1vo]

yo lo hice pero se ve mal en responsive

[@LexterDev]

Hola, cuál es el problema?

[@mauroariel84]

El menu se esconde cuando eligen o solo dando de vuelta click al icono del menu ?

[@LexterDev]

Cuando se da clic en el ícono muestra u oculta el menú.

[@mauroariel84]

@@LexterDev eso lo entiendo y me sale, el problema es que cuando hago un menu asi, para movil. Al darle a donde quiero ir el menu sigue desplegado. No encuentro como hacer que se cierre solo.

[@toxyspam3360]

Alguien me ayuda? Las barritas no se ven en mi html y tengo el odigo escrito bien

[@LexterDev]

Habría que revisar si la fuente de íconos está siendo importada/insertada/cargada correctamente.

[@toxyspam3360]

@@LexterDev Soy nuevo, no se que es eso:(, pero gracias!

[@EmprendeRicoEmprendePobre]

@@toxyspam3360 Te falta agregarle el js de kit.awesome.com

[@ricardogonzalez9992]

Amigo no me sirve que puedo hacer

[@LexterDev]

Qué error te da o qué sucede bro?

[@ricardogonzalez9992]

@@LexterDev cuando lo intento abrir le clickeo y no hace nada no tengo mucha experiencia programando y no de que hacer

[@pamelag.l282]

Puedes pasar el link del kit fontawesome?

[@LexterDev]

Te recomiendo mejor crear tu propio kit, eso te ayudará en tus proyectos. Puedes crearlo aquí fontawesome.com/start

[@MHAROLD22]

no me muestra el listado de menu en responsive pero cuando le doy inspeccionar y cierro aparece y desaparece rapido que puede ser

[@LexterDev]

Revisa los nombres y asignación de las clases CSS. Una de ellas no está aplicada.

[@MHAROLD22]

@@LexterDev si había declarado mal el Dom

[@MHAROLD22]

Ahora quiero aprender hacer un buscador con Ajax en mi cabecera tendrás algún vídeo

[@LexterDev]

Tengo un vídeo sobre búsqueda en mi canal. Puede que te sirva, aunque sinceramente no está actualizado y uso JQuery 😅. Pero puedes revisarlo.

[@jesusortega526]

Me pasa lo mismo, como lo solucionaste??

[@nomadascreativos07]

tengo un problema cuando despliego el menu... me queda por de tras de un slider que tengo :C

[@LexterDev]

Juega con el z-index bro, ponle uno alto al menú.

[@mariajosevargas8261]

amiwo que hiciste? tengo el mismo problema :c

[@nomadascreativos07]

@@mariajosevargas8261 en la parte de z-index, cambiale el valer y ve probando con cual se te ajusta mejor

[@vvioletf]

no me sale bien :(

[@LexterDev]

Cuál es el problema?

[@vvioletf]

@@LexterDev al minimizar la pantalla no me despliega el menú

[@LexterDev]

@@vvioletf Ya revisaste las clases y estilos CSS? Si el JavaScript está trabajando como debe ser?

[@geht8433]

@@vvioletf tengo el mismo problema u.u

[@xmaykel4843]

ami no me salen las 3 lineas? porque pasa eso?

[@LexterDev]

Tienes agregado tu pack de fontawesome?

[@xmaykel4843]

@@LexterDev solo puse

[@LexterDev]

Si te fijas a inicio del vídeo menciono qur estoy usando un pack de fontawasome, ese pack es el que contiene los íconos.

[@MartinGonzalez-oz9ut]

Mala practica, está bien si solo te interesa un diseño algo responsivo pero para móvil es diferente.

[@LexterDev]

Acá muestro una manera de lograr algo que sirva para móviles también, pero hay más técnicas y/o maneras de hacer lo mismo o mucho mejor. Igual, la idea es ayudar e ir mejorando en el proceso. Un saludo 👋

[@AltoViajeBlog]

Imposible que funcione la parte de JS

[@LexterDev]

Hola bro, por qué? Si tienes dudas o problemas con el código, escríbeme al inbox de mi página de Facebook. El link está en la descripción del vídeo.

[@Tumburulun]

Antes de este video ví uno de 7 minutos, 7 minutos Te pasas Literalmente el mismo nav en 7 minutos

[@joseluiscastillohernandez1376]

no me funciona el hover ;C

[@LexterDev]

Checa que el estado y los estilos estén correctamente aplicados sobre el elemento en el CSS.

[@miguelros96]

7:56

[@miguelros96]

18:25

[@avelinofarfan6805]

Tienes q pagar pa ver el código

[@LexterDev]

No necesariamente, en el vídeo se puede ver perfectamente. La otra opción está para obtener los archivos fuente, si así gustan.

[@schiffer-senpai6024]

@@LexterDev no todo se ve bien :(

[@bettasplendens0733]

Minuto 10:57x XD en serio xD

[@LexterDev]

¿En serio qué amigo?

[@julianap.5183]

Si pones "Crea un Menú Horizontal Responsive con CSS" de titulo, no uses JavaScrip, me comi media hora de video al pedo. Y la pantalla de la izquierda que mostras la pagina al pedo la tenes, ni mostras los cambios que hiciste.

[@LexterDev]

Pongo ese título porque el 98% de todo esto es HTML + CSS, de Javascript nada más spn 9 líneas bien sencillas. Y en la pantalla de la izquierda la tengo porque los cambios se van mostrando al momento que yo guardo en el editor. No sé exactamente a qué te refieres con "no mostraste los cambios que hiciste", porque eso hago todo el vídeo xd

[@agustinchavarro2089]

la verdad no me funciono

[@LexterDev]

Por qué bro? Te da error o algo por el estilo?

[@agustinchavarro2089]

@@LexterDev el menu no se despliega hacia abajo y ya revise el codigo como 10 veces...bro

[@jjcg2005]

@@agustinchavarro2089 me pasa lo mismo

[@Gowker]

Muchas gracias por este tutorial, es fácil de hacer y de entender!

[@albertohernandomoreno]

buenas tardes amigo, tengo un problema, cuando despliego el meno con movil se despliego bien el problema es que queda por detras del contenido, imagenes , videos. etc, que puedo hacer en ese caso?

[@LexterDev]

Juega con el z-index bro, ponle uno alto al menú.