Trucos con Flexbox (2) - Menú responsive

[@victorxd9532]

hace dos semanas vengo buscando un video que explique tal cual como vos, me ayudo bastante... saludos

[@ajayazo]

déjame felicitarte amigo , apenas estoy comenzando a ver tus vídeos y me he percatado que tu manejo del tema es excelente, y tu trabajo impecable.

[@JulioCanteroperfil]

excelente tuto Alvaro... este es uno de los mejores canales de Css en español que hay en youtube... con grandiosos tips y sin errores... gracias por toda la dedicación que le pones...

[@RealismoDGL]

solo quiero comentarte que eres un tutor excelente, la explicación es clara, por cierto supe de usted buscando información de cursos en linea, estuve apunto de cometer un error, así que gracias y me suscribo a sus cursos, si así están los tuto en el canal los cursos completos han de ser una joya, saludos.

[@user-sy1sg4ws3y]

Este vídeo vale oro, el tipo explica como usar flexbox, hacer un nav responsive y encima a que este se oculte o muestre con efecto de animación(no instantáneamente), like y a mi lista de reproducción

[@oscardocente]

Alvaro excelente, pero podrías ampliar el menú que contenga submenus por favor. Le agradezco.

[@oscardocente]

Ya lo pude hacer, gracias

[@Guillermo19]

Joder que historia

[@maxmaldonado5587]

Saludos, existe un pequeño error cuando le asignas padding-left de 1em en , no deberias poner padding-left 0 dentro de la mediacuery, ya que no tiene efecto, en el video se ve como queda descentrado, la respuedta es padding-right: 1em; asi contraresta la accion anterior, y las quedan centradas. Otra cosa en lugar de poner hover en y luego display block, por que no se pone hover directo a las y se omite el innecesario display blok en . Agradeciendole por sus videos muy didacticos, le pido un favorcito, digame como separo las para que los botones queden separados.

[@EmersonYurivilcaRicaldiDreams]

Ese problema es más que nada por el estilos en cascada de css, tienes que poner la media query al final de la clase menu.

[@manuelalzate7270]

El display block es para que toda la caja sea clickeable, no solo el texto del .

[@jesusjrondon4399]

Magnifico video me habría facilitado mucho el haberlo encontrado antes, pero bueno ya esta, pero tengo una duda con el codigo html del toggle?? podrias pasarme la estructura en html del menu?? gracias por su tiempo

[@davbaster]

Para los que andan buscando cuál es el código html de #toggle-menu, yo puse el siguiente: Menu

[@nihil_um]

Hola, Álvaro. He comprobado que ocurre una cosa un tanto extraña cuando pulsas en el toggle-menu para abrir el menu. Si entonces extiendes la pantalla por encima de los 768px (con el menu abierto), no se aplica bien el display:flex y tienes que ponerle un !important para que funcione. No sé si es que yo estoy haciendo algo mal pero dos veces que he hecho el ejercicio, dos veces que me ha sucedido.

[@LuisAntonio-cd4ck]

Que talento Álvaro, me gustaría saber si tienes un truco en cuanto al comportamiento de una imagen, al desplazarse hacia arriba y hacia abajo, parece la imagen suspenderse o achicarse apenas se desplaza hacia abajo. Agradecería tu confirmación

[@mosheline]

Excelente explicación. Cuando empiezo a hacer pruebas de estrés, el menú a veces se queda pegado como column o desaparece cuando lo estiro. Hice las pruebas sobre chrome, firefox e IE. Tú también lo viste en el minuto 16:51.

[@danhanfry5629]

Desde luego usar flexbox es la linea correcta a seguir. Gracias por el video. Si nos ponemos un poco mas técnicos pienso que el desplegable se podría a ver echo con puro css para ahorrarnos javascript. Un saludo.

[@EDteam]

dan hanfry Claro, de hecho en este video lo explico kzbin.info/www/bejne/mYjZfYOvbbR1sKM

[@fakegurus]

+dan hanfry Boing... Boign... Pelota jajajaja! Dan dedicate a hacer bots y deja el Front para los que sabemos jajajajajaajaj (Nos conocemos y hacemos proyectos juntos)

[@AlvaroCabralesMysterGuaray]

este tutorial me ayudo mucho ahora intentaré a este menu responsive con flexbox añadirle los submenus desplegables como el video de ese ultimo link que posteas, cualquier recomendación será bien recibida EDteam

[@BerlitzRiviera]

Hey hermano, gracias por compartir tu tiempo y conocimiento...

[@gorgegomez4873]

Amigo muchas gracias por tus tutoriales, quisiera hacerte una consulta, Tienes algun tutorial que explique con manzanitas como hacer un formulario de contacto en html5, con su validador y como implementar correctamente recapcha de google? he leido un poco pero no logro entenderlo, soy algo nulo en php y me estoy haciendo loco. Infinitas gracias por tus tutoriales, son de lo mejor que he visto, explicas a la perfección todos los detalles, cosa que no sucede en muchos otros tutoriales. que tengas un buen resto de semana.

[@glapuente]

gracias por tu aporte...

[@dearalex2056]

Una joyita de vídeo que acabo de encontrarme.

[@LimonyMoney]

Hola Álvaro, muy bueno el tuto, solo una observación: la línea 22 del .scss (padding-left: 0;) no funciona (el texto sigue pegado más a la derecha), debido a que esa media query está por encima de una orden que es "padding-left: 1em;". Al ser hojas de cascada predomina la orden de abajo. Si en el archivo .css pones esa media query al final, todo queda alright! :) Es solo un comentario, espero que lo tomes a bien. Saludos y éxitos maestro.

[@iscraulsanchez]

Al momento en que das clic sobre el botón MENU, se le aplica por medio de jQuery al UL display:block; y se muestra, después si lo cierras se aplica UL display:none; Cuando haces la pantalla mas grande de una resolución 768px el display:flex; que se aplica al UL queda desabilitado y el menu ya no se muestra, entonces para que no pase esto se le pone un display:flex !important; al UL cuando sea mayor de 768px. Lo expongo xq igual me paso y en el video también en el min. 16:51, el amigo ***** refresca la página pero igual alguien x si les pasa. XD GRACIAS POR LOS VIDEOS SON EXCELENTES SIGUE ASI AMIGO.

[@EDteam]

Raúl Ángel Sánchez Velarde Buen punto. No lo habia visto de ese modo. El detalle es que solo los que diseñamos reducimos y agrandamos la pantalla y vemos eso. Los visitantes normales de un sitio web no realizan ese proceso y practicamente nunca lo notarán.

[@ArthirFCaffrey]

Raúl Ángel Sánchez Velarde a mi también me pasa pero solo cuando oculto el menu (estando en menos de 768px) y agrando la pagina y se oculta todo. sin embargo cuando el menu esta desplegado y estiro la pagina no pasa eso.

[@iscraulsanchez]

Si porque jQuery le aplica el elemento display:none al UL directamente desde el HTML cuando lo ocultas, entonces cuando amplias la pantalla se omite el display:flex del CSS, es por eso que se debe poner un !important para que se aplique el CSS por encima del atributo jQuery en el HTML.

[@10crack8]

+Raúl Ángel Sánchez Velarde Me estaba volviendo loco, pensaba que lo había hecho mal y por eso me desaparecía. Te pregunto una cosa a ver si lo sabes, ¿Como haría para que cuando pases a pantalla pequeña el menú salaga encogido (o sea no salga) y le tengas que dar para que salga?. Un saludo y espero tus respuesta.

[@iscraulsanchez]

10crack8 Hola amigo ya con el codigo que nos muestra ***** no te muesta el menu completo en resoluciones pequeñas en todo caso en tu media query para la resolucion que necesites le das un display:none; al menu y el jQuery hace eel resto o si quieres mandarme un mail con gusto te ayudo si es que puedo

[@felipegs3]

Me encanta tu trabajo Tocallo, saludos

[@fakegurus]

Buen video, pero entiendo que haces el toggle en jquery por meter más conceptos sobre estilos en el video. Realmente lo optimo seria hacer el toggle tambien en css, ¿no crees? Gran contenido, Como consejo a los que se quejan de que los cursos de Escuela Digital se hacen largos, la solución es poner Velocidad: 1.5, se entiende genial y te puedes mirar los videos en 30-40 minutos. Espero más novedades, personalmente me molaria ver cursos sobre optimización de archivos con el fin de potenciar el rendimiento de cara al navegador.

[@EDteam]

+José Pascual en realidad se puede hacer el toggle con css pero tendria que meter un input ensuciando el html. Tecnicamente hablando, para interacciones el lenguaje correcto es javascript, no css. Saludos.

[@karenmossetto]

Me encantó lo de la velocidad !!!! Después de haber visto todo el curso de flexbox y morir de la ansiedad, descubro que los podría haber visto mas rápido ajjajaja, de seguro que lo voy a empezar a implementar!! gracias @Jose Pascual

[@fakegurus]

Karen Mossetto de nada!! Para eso estamos!! 😁

yo opino lo mismo ya que es muy incomodo el mensajito de google speed (el javascript que bloquea la visualizacion de su pagina uff) y a la hora de cargar la pagina se demora un mundo.

[@hguilla]

Muy buena explicacion. Tuve un problema que el "display: flex" de .menu es sobreescrito por "display: none" cuando achico, abro el menu, y estiro de nuevo. Me pasó tanto en Chrome como en Firefox Por si a alguien más le paso, la solución fue agregarle "!important" al "display: flex". Saludos

[@danielvicens9931]

+Héctor Guillamón Gracias por el dato , pero seria buenisimo si alguien me pudiera explicar porque...un abrazo y nuevamente gracias...

[@AlanChavezV]

+Daniel Vicens Cuando la regla !important es utilizada al declarar un estilo, ésta declaración sobre-escribe otras declaraciones. El problema que reporta +Héctor Guillamón sucede porque +Álvaro está utilizando slideToggle() de jQuery para ocultar el menú. slideToggle aplica un estilo en línea "display: none" sobre el menú, el cual sobre-escribe el estilo "display: flex" que se declaró en la hoja de estilo. Es por eso que +Héctor recomienda aplicar !important a la hoja de estilo para que jQuery no lo sobre-escriba.

[@agbautista]

Saludos desde México Héctor Guillamón, yo intenté hacer el ejercicio, pero me atoré precisamente en el momento en que Álvario quitó el display:flex y lo agregó en la media querie de .menu, para poder ver el menú en una columna (minuto 09:55). Entiendo que Álvaro usó Sass y creo que por esa razón perdí el hilo. Me podrías orientar al respecto? :)

[@hguilla]

Pero que problema estas tiendo?

[@agbautista]

Héctor Guillamón muchas gracias por responder. Me perdí al momento en que Álvaro empezó a trabajar con las media queries para ir ajustando el menú a los 768px. Para ser concretos al minuto 09:55, cuando el display:flex de la clase .menu lo pasa a la media querie. Ahí me quedé, ya no supe como seguir con el ejercicio. Me perdí sobre todo por el uso de los preprocesadores que se usan en el ejercicio. O de casualidad tu aún conservas el ejercicio terminado y que me lo pudieras compartir? Saludos.

[@yosoynch]

Fácil y Rápido, muy buen video Álvaro!

[@hackrdk5031]

¿Podrías hacer un vídeo con este ejemplo pero con multinivel? Excelente trabajo. ¡Saludos!.

[@wilfredorodriguezcarrion7714]

Excelente explicación, gracias por tu gran aporte.

[@valenciapaginasweb]

Estaria muy bien un ejemplo con subcategorias usando flexbox. Saludos y muchas gracias por los tutoriales..

[@valenciapaginasweb]

Valencia Paginas Web o mejor aun... 3 niveles..

[@cristianandresvargasgonzal6385]

Gracias por el video me ha servido mucho.

[@ReparaciondeconsolasTorreon]

Hola Alvaro estan muy buenos tus videos ya tiene mas de un mes que los estoy viendo y estoy practicando mi motivo de comentar en este video es por que tengo una duda. ya hice el menu responsiv y lo probe en 2 tablet y no se mira el menu no aparece solo en el celular cual podria ser el problema ?

[@ProceseroMexicali]

Jade es genial!!! a pesar de su sintaxis "atipica"

[@andresloncode]

Excelente, no conocia esta caracteristica. gracias.

[@ArthirFCaffrey]

Hola que tal Alvaro F. tengo una duda espero puedas resolverla. Habemos personas que apenas comenzamos con esto del desarrollo web (por cierto muy buenos tus cursos, excelentes) y en síntesis mi duda es que si es conveniente iniciar y seguirnos por el camino de usar flex sin haber pasado por todo lo anteriormente utilizado como el modelo de cajas y todo lo demás que resuelve flexbox o ya flexbox es el futuro y todo lo demas anterior se llegara a tomar como obsoleto y no tendría caso aprenderlo. de antemano muchas gracias.

[@EDteam]

Arthur Flores todo eso lo respondo en el primer video kzbin.info/www/bejne/lYq4e2Zte6aFqLc pero en sintesis flexbox es un nuevo modelo de layout. Nada mas. El modelo de caja es universal y se sigue aplicando en flexbox. Por si acaso, Flexbox no es la vaca sagrada. La experiencia es la que te enseña cuando usar flexbox y cuando no.

[@ArthirFCaffrey]

Escuela Digital Te agradezco

[@RaulHernandez-pq3bi]

Hola Alvaro!! Sé que no tiene nada que ver con Flexbox, pero, crees que es más recomendable usar jQuery que Javascript puro?? Digo, yo en lo personal uso Javascript puro, pero qué dices tú?

[@LudwringLiccien]

Saludos Uno mas de los excelentes vídeos de Alvaro y su canal Una duda: Cuando el texto o nombre de los botones es de mas de una palabra o muchos caracteres y otros no la división no es exacta. Hay forma de corregir eso? Ejemplo: en un width de 600px Inicio | Quienes Somos | Donde estamos | Contactanos Gracias de antemano

[@agustinflores614]

.... Y lo pudiste solucionar? Jaja hace 6 años

[@MrOlivermarketing]

exelente tutotrial te la rifas solo que como no soy tan abanzado como pusiste el toggle en el html no se como ponerlo ya que utilizate algo atajos y no pude ver como aparecen el html gracias por tu aportacion. porfavorrrrrrr

[@santiagoduque908]

Hola buenas noches , tengo una pequeña pregunta , cómo puedo manejar flexbox , cuando utilizo un framework como materialize , este framework me daña todas las propiedades del flexbox :/ y al parecer el navegador le da prioridad a la hoja de estilos del materialize....muchas gracias por contestar esta pregunta.

[@johnnypatino27]

Hola, se puede hacer un menú desplegable con flexbox? pero que sea multinivel!! Saludos

[@laitongarcia3065]

Fácil fácil na tua mão. Parabéns

[@3l1t37]

hola EDTeam soy nuevo en estilos css .. pero quisiera saber como se hacen menu horizontales desplegables responsive .... psdt: son geniales los vídeos que haces

[@VL-Unlight]

Excelente vídeo , así como todos los demás del canal , son de mucha utlidad, tal vez cabe la posibilidad de que pudieras poner los archivos fuentes para poder descargarlos, slds! Edit: en mi codigo, debajo de 768px el menu desapace, no entiendo por que no me sale el menu debajo de esta medida.

[@kkylekartman]

lo sigo siempre y soy un principiante pero intento seguí el ritmo pero la sintaxis que usa con sass no me funciona con mi simple css... de todas maneras muchas gracias por el tiempo que se toma por enseñar

[@EDteam]

kkyle kartman Puedes usar prepros.io y usar sass, Prepros se encargará de convertirlo a css. Te recomiendo mucho escribir en Sass.

[@FernandoMXoficial]

Excelente, justo lo que buscaba

[@yuribarzola6431]

y para los submenus ?

[@albertokatrich8576]

hola excelente video tengo una pregunta como hago para q cuando el menu este en tamaño pequeño y al movel contenido siempre quede visible el menu ?

[@Alexyslozada]

Hola Alvaro, estoy revisando tu template de jade, y creo que tienes un error en la tabulación de las etiquetas script, ya que estas etiquetas deben ser hijas de head o de body, no pueden ser hijas de html directamente. Esto se puede validar en validator.w3.org/ o en validator.w3.org/nu/ . Para hacer la prueba se puede subir el archivo html o copiar y pegar el contenido del archivo html. Allí se encontrará que genera un error por la posición de la etiqueta script. Gracias y Saludos!!!

[@EDteam]

Alexys Lozada Tienes razon, es un error de identacion, no que yo crea que los scripts sean hijos del html. No lo habia notado.

[@Alexyslozada]

Totalmente de acuerdo contigo.

[@paulvg92]

+Alexys Lozada Haciendo esta prueba acabo de notar que emmet por defecto te coloca html, head, body al mismo nivel, entonces emmet se esta equivocando?

[@Alexyslozada]

+PaulValencia92 head y body deben estar tabulados para que los coloque dentro de html (ojo, estamos hablando de JADE), sino están así cuando jade compile, quedaría así: Lo cual está mal.

[@fuiles]

Hola, Álvaro, consideras que ya no vale la pena en aprender el modo tradicional de hacer menús con left? Te lo pregunto porque recién me inicio en CSS. Gracias.

[@EDteam]

Al día de hoy ya no. Aprende con flexbox, es 100% compatible.

[@fuiles]

Muchas gracias.

[@williamgec]

Hola Alvaro, una consulta como hago para que al crear el menu con each de jade le coja el href con el mismo nombre del menu anteponiendo "/" que mi resultado de html sea servicio contacto como se aria en jade. saludos

[@geovanigarciagaona7302]

Tendrás el trabajo, para descargarlo?

[@luisfernandoescobar2131]

Estoy un poco confundido con el toggle, porque no se como se vé en html, soy nuevón en esto de escribir código, estoy empezando a entenderlo, te cuento que el sas será muy practico para los que tienen mucha experiencia, pero los que aprendemos necesitamos ver el codigo html, gracias, tus clases son muy buenas, de lo mejor que hay en la web, pero no supongas que la gente sabe ciertas cosas que son tu cotidianidad, para muchos de nosotros es la dimensión desconocida jajaja

[@davbaster]

en el html, yo usé el siguiente código html: Menu

[@zabdiyoab]

wuau que locura, buenisimo

[@Jmontero1804]

Alvaro a que se debera que no me funciona el jquery para contraer y expander el menu? tengo todo bien aparentemente, pero no me funciona? tengo antes del /body el script donde llamo a jquery-2.1.4.min.js y obvio mi archivo de jquery en este caso js/menu.js Me faltara algo? Muchas gracias, excelentes tutoriales.

[@marlontorresvera8473]

muy bueno por que no subes uno con submenus

[@TANOSProductora]

en vez de letras les puedo poner un icono?

[@TheEfscomplex]

videos geniales!!

[@Danielcastro-pd5xm]

estimado una consulta, tengo un div que contiene un div con el logo y otro div con el menu, se me presenta el sgte problema cundo hago clic en cualquier item del menu mi logo parpadea no se como solucionar. gracias de antemano.

[@MrOlivermarketing]

whooooo exelente video pero como seria un video igual pero con submenus

[@EDteam]

+oliver guzman simplemente se le da position relative a los li del menu principal y position absolute a los ul que esten dentro de li. Luego con top y left los acomodas. Es super simple.

[@agbautista]

Saludos desde México, yo intenté hacer el ejercicio, pero me atoré precisamente en el momento en que Álvario quitó el display:flex y lo agregó en la media querie de .menu, para poder ver el menú en una columna (minuto 09:55). Entiendo que Álvaro usó Sass y creo que por esa razón perdí el hilo. ¿Alguién me podría orientar o ayudar al respecto? :D

[@farrithfarrith456]

el segundo meta paraque sirve , cual es el funcionamiento

[@sanchez-emir]

hola Alvaro, quiero agregarle un border usando el ul pero no logro poner, ayuda porfavor. PD: cuando usaba solo el nav con a sin usar los ul si me funcionaba. Ayuda, Gracias.

[@AdemarCadenasColunche]

Excelente!

[@mochellalle3524]

en el minuto 10:00 creo que asi es para que salga correctamente @media screen and (max-width:768px){ .menu{ display: flex; flex-direction: column; } }

[@diegogutierrez7435]

Si yo también pensé en esa solución, aunque no es necesario el display:flex, pues en las media queries las propiedades de los elementos se guardan.

[@hernangarcia77]

Me sucede algo curioso que no puedo determinar devido a que soy muy novato en js. Si no doy click al togglemenu funciona correctamente en cuanto doy un click y agrando la ventana el menu horizontal no aparece o aparece como vertical segun el estado que tenia en modo movil

[@aleixplancheriamosquera5607]

bua eres un jefazo hahah :D

[@pipers0123]

muy buenaaaaaaaaa!!!!

[@zabdiyoab]

me ayudaste

[@ArthirFCaffrey]

Escuela Digital y como podría hacerse para que en la version que se encuentra en menos de 768px apareciera automáticamente el menu escondido?

[@Rubens-89]

Esta muy bueno este menu responsive pero tiene un problema: Cuando haces click en el boton, automaticamente se crea dentro del tag "display: block" como un estilo en linea. Y al volver a estirar la pagina web no toma el valor "display: flex" (esto es debido a que el elemento en linea tiene mayor "rango/poder/autoridad" que el estilo css). Para solucionar esto, tuve que crear una clase, por ej: "show" y detro de ella poner display "block" ... entonces, en js cree una función que al hacer click en el boton agregue al tag la clase "show" y al volver hacer click la quite.

[@maxmaldonado5587]

Hola estimado amigo, es para mi un honor saludarlo, y felicitarle por sus increibles videos, me sirven de mucho pero a veces quedan vacios sin responder e inquietudes, por ejemplo me gustaria saber como, se colocan los valores para la almoadilla # en el codigo del menu: each item in ['HOME', 'ABAUT','SERVICES', 'CONTACTO'] li: a(href="#")= item como me dirijo a: abaut.html, services.html contacto.html etc etc... me rompo la cabeza y no encuentro otra solucion que cambiar el codigo por: li a(href='#') HOME li a(href='#') ABAUT li a(href='#') SERVICES li a(href='#') CONTACTO

[@FascompInformatica]

Estimado estuve haciendo esto pero tengo problemas con los a al momento que le pones padding en el media queri no se borran aunque le ponga padding: 0; y me fije que en el video te pasa lo mismo. Si le pones un padding mas grande a 1em te daras cuenta. La pregunta es como se arregla eso???

[@AlbySantana]

+Fabián Sepúlveda (Fascomp) coloca en el "a" media query "padding-left:0!important;"

[@FascompInformatica]

Vale gracias....

[@gregoriomaruri7562]

Hola Alvaro, excelente tutorial, sólo que el SCRIPTS al guardarlo me genera ERROR: '$' is not defined , cómo se puede resolver? muchas gracias

[@julioalvarado1833]

Por el jquery

[@juancamposmarchan7225]

Hola me gusto tu video pero no se porque no me funciona el codigo script, sería bueno que me ayudaran cx ^_^

[@ADMINEDHAWK]

Como hiciste eso de: .menu { li { } } a mi no me funciona

[@davideq08]

lo hizo pero los li no funciona la propiedad flex: auto, será están en un div posición absoluta, q puedo hacer?

[@jaimelgrande]

Cuando hace el efecto de slideToggle en el screen y se le pasa a tamaño maximo de la ventana, se queda con el efecto de pantalla pequeña, ya lo probé

[@adairhz]

¿Alguien sabe qué plugin está utilizando para que le aparezcan las predicciones con Javascript? Yo también utilizo sublime text pero a mí no me aparecen las predicciones:(

[@luispolar3039]

Porque no me funciona el @media screen and (min-width: 400px){ display: flex; } en mi archivo css, que es lo que me falta para que funcione. Gracias

[@darknote7907]

Alvaro ayudame tengo un problema con el menu y es que no hace slide-down ni slide-up, el menu q he hecho es parecido al q hicistes ademas lo probe en codepen y si funciona , despues lo pruebo en sublime-text y atom y no funciona y eso el codigo jade esta igual al tuyo, el css tambien el javascript igual y no funciona en mi pc

[@Mariofloresromero]

La raja...a practicar

[@jonylif1987]

Excelente video! La propiedad rgba (#000,.2); no me funciona, alguien sabe por que?

[@agira7525]

Por que el usa sass . :v

[@jmont4349]

Como demonios hemos podido vivir todo este tiempo sin el Flexbox D: T_T

[@yuribarzola6431]

la función slideToggle() agrega un display:block al elemento para mostrarlo y display:none para ocultarlo ? porque al hacer toggle en el menu en tamaño movil y subirlo a tamaño web desaparece el menu o de lo contrario muesta el menu en vertical. ¿como hago para solucionar ese problema ?

[@EDteam]

Al display en tamaño web ponle important para que gane en la especificidad.

[@yuribarzola6431]

+Escuela Digital Grande Alvaro no había pensado en eso estaba que me rompia la cabeza. Gracias me salvaste !

[@angelbrito9924]

Hago todo igual una y otra vez y no entiendo porque todo me sale mal y :hover no me funciona por nada

[@horimiyarawstyle]

todo bien pero no me centra los textos. con text-align

[@ClawHammer23]

No me termina de convencer JADE, prefiero seguir usando EMMET en Sublime o en Brackets, así no pierdo la costumbre de usar HTML puro y no tengo preocupaciones por cerrar las etiquetas....

[@EDteam]

Julio Vergara Con lo que te sientas más comodo está bien. Pero algunas cosas jade las hace mucho mejor que emmet + html. Principalmente el tema de variables, iteraciones, condicionales, blocks, extends, etc.

[@alexisgavidia3141]

tuve que incluir el a dentro del li para que se me quitara el 1em cuando era grande i { border-right: 1px solid rgba(#000,.2); text-align: center; flex: auto; a { padding-left:0; }

[@biLLioGomez]

Intente hacerlo y en chrome y mozilla funciono perfecto pero en safari no (ya puse los prefijos), sigue sin funcionar flex

[@luanafonseca5207]

como hago para que una imagen no sea responsiva, y quede con un tamaño fijo? (es para el logo)

[@EDteam]

asignale tamaños especificos en pixeles.

[@WillmerGonzalez2911]

Yo también me percate de ese detalle no soy un experto así que lo solucione de la siguiente manera espero te sirva parte HTML Document ABC Company Menu Home About Products Services Customers Contact Parte JQuery $(document).ready(function() { $('#toggle-menu').click(function () { var elemento = $(this).next(); elemento.slideToggle(function () { if (elemento.attr("style") == "display: none;") { elemento.attr("style", ""); } }); }); $(window).resize(function(event) { if ($(window).width() >= 768) { $('#menu').attr("style", ""); } }); }); recuerda que necesitas Jquery.js

[@MrOlivermarketing]

yea ya puede encontrar como poner el codigo yeaaaaa mi hermano

[@arquifit6251]

15:14 😂😂😂😂

[@AlbertoRodriguezsgo]

Algo hice mal. :))) Comiencen con mas de 768px, luego achiquen la ventana, luego click en menu desplegandolo, inmediatamente vuelva a agrandar la ventana a mas de 768. El menu li se queda vertical. A ustedes, ??

[@politobandido]

Hola Alberto, a mi tambien me pasa lo mismoestoy intentando solucionarlo pero no encuentro la manera, si conseguiste la solucion te agradeceria que me dijera como lo conseguiste, un saludo...

[@danilok.m.2092]

No se ve

[@albertokatrich8576]

hola tengo porblemas con el toggle, en realidad no entiendo la sintaxis porque esta en hrml jade alguien me lo aclara en html normal ? gracias

[@EDteam]

+carlos monagas kzbin.info/www/bejne/jpSvmqqribKGrdE

[@albertokatrich8576]

Gracias Álvaro lo veré en lo q pueda porque se ve cómodo de trabajar algo enredado pero es cuestión de costumbre..

[@josee.payemamani5062]

Messirvio

[@danilok.m.2092]

No se absolutamente nada en fondo negro