Como hacer un menú con Bootstrap 5 para tu sitio web

[@TecnoCodigo]

🟢 NUEVO GRUPO DE TELEGRAM: t.me/joinchat/OETaya7uYF8wNjhh 🟢 Crear pagina web con CHAT GPT: kzbin.info/www/bejne/bF6cgmh8m7mSps0 🔴🎁 𝘼𝙮𝙪𝙙𝙖 𝙖𝙡 𝙘𝙖𝙣𝙖𝙡 desde paypal: bit.ly/TE-Donaciones 🔴🎁 𝘼𝙮𝙪𝙙𝙖 𝙖𝙡 𝙘𝙖𝙣𝙖𝙡 desde MercadoPago: ceneka.net/tecnoemprendedores

[@liakilljoy5543]

Hola che, me salvaste el día, el curso de programación, mi portafolio, TODO. Al fin pude hacer un menú con Bootstrap. Ahora sólo me queda utilizar el responsive en lo restante de la página pero esto es un paso importante. Gracias❤❤

[@TecnoCodigo]

Me alegro mucho! te esperamos pronto por el canal

[@lucasb101]

Holaaaa como estas? Estoy en tu lugar ahora y no sé cómo empezar con el portfolio

[@ricardobarahona2829]

El mejor tutorial, sin tanto enredo, directo al punto.

[@TecnoCodigo]

Gracias Ricardo

[@saezcesar]

Excelente papa..... sos un capo.... gracias y saludos.

[@TecnoCodigo]

Gracias a ti Cesar!

[@sergioplaza640]

Hola compa, me sirvio bastante el video, se puede profundizar o recalcar mas algunas cosas pero esta re bien, like, suscribo y tdod, gracias

[@josemora5539]

Excelente, da gusto ver tutoriales como este.

[@TecnoCodigo]

Gracias Jose, saludos

[@jheremiasrivas1057]

Crack, corto y muy claro!

[@TecnoCodigo]

Gracias

[@marian244]

Muy bueno el tutorial!! Muchas gracias!!!!

[@TecnoCodigo]

Gracias por comentar

[@l1t4y5_a2u3]

Una pregunta, yo utilizo Bloc de Notas para hacer mi pagina (no se si tenga algo que ver), queria saber como publicar la pagina web o si directamente se publica.

[@TecnoCodigo]

Hola , si se puede publicar, te dejo dos videos que te van a servir para publicar un sitio kzbin.info/www/bejne/rGqnp5qcd5lqmpo kzbin.info/www/bejne/bYiZXp2JhKuAna8

[@l1t4y5_a2u3]

@@TecnoCodigo Muchas gracias amigo, eso era lo que me faltaba

[@omarvidalmendozachigua4288]

it worked! thank you so much!!

[@nataliaaguero4799]

Excelente! Muchas gracias

[@TecnoCodigo]

Gracias por comentar

[@Henry_Nunez]

Buen video, excelente explicación. Muchas gracias 👍👍

[@TecnoCodigo]

Gracias por comentar

[@nosedondeconnosequien]

Aqui apoyando, los amigos del washap 👍

[@TecnoCodigo]

GRACIAS hno! un abrazo

[@evelinyanina7048]

Buena intro! gracias por la info

[@TecnoCodigo]

Gracias!

[@michellepalma6412]

Excelente contenido edutuber me encanto el video🎥 gracias por compartir 👌

[@TecnoCodigo]

Gracias y saludos

[@TheSauco79]

Gracias, esto ha sido de gran utilidad 👍

[@TecnoCodigo]

Gracias a ti!

[@Deus-lo-Vuilt]

Mas videos asi porfa , dejo like y sub

[@TecnoCodigo]

gracias por el sub, ya estoy preparando mas videos , estate atento pronto

[@Deus-lo-Vuilt]

@@TecnoCodigo Muchas gracias :D

[@fernandobaigorria9151]

That was great. Thank you.

[@TecnoCodigo]

Gracias por comentar

[@SebasDeveloper]

Tengo una duda, a la hora de hacer responsivo para movil al momento de darle click al boton para abrir el menu no hace la accion de desplegar las opciones tengo ese problema

[@joseivanperezugalde9745]

pudiste resolver ese problema ?

[@nicostjohn]

Lo bueno seria que expliques como aplicarle estilos propios (no de bs) a un elemento de bs

[@TecnoCodigo]

Ok voy a preparar un video con ese tema , gracias por el aporte

[@diegofernandez9124]

Hola estimado. Es increible como esta libreria te simplifica todo. Te ahorra choclos de codigo de CSS. Me viene bien por que tengo que armar para mi universidad una pagina web que es como la tesis final, en este caso de servicios y no sabia por donde empezar. Tenes otro video donde armes algun proyecto mas completo o que me puedas recomendar? Muy buen laburo, te ganaste otro suscriptor!

[@TecnoCodigo]

Gracias Diego , no tengo videos de proyectos completos, pero quizás estás plantillas te sirven , están basadas en bootstrap y son gratuitas bootstrapmade.com/

[@diegofernandez9124]

@@TecnoCodigo mil gracias!!!

[@alanandresrodriguez8176]

Hola como andas?? Muy bueno el video, pero se puede además lograr que cuando se scrollee el NavBar cambie de color?

[@TecnoCodigo]

Si se puede, peor es complicado podrias usar JS

[@boykanopaco4610]

Buenas como hiciste para k salga el logo a mi no me sale porfavor gracias

[@alexpompeyo4551]

Hola dentro de productos esta el submenu, como se podria agregar un subsubmenu ? en limpieza que tenga adentro otro menu

[@TecnoCodigo]

hola, puedes ir anidando , deberis insertar otra etiqueta que contenga la clase dropdown dentro del submenu nuevo

[@LikeDePollo]

una ayuda es para una tarea, como podría ajustar este menú para que sea vertical y desplegable?

[@macarena-cavieres]

Hola, buen video, cuando lo intente poner en mi codigo fue que cuando cambio a modo celular o una pantalla chica, las tres rayas que se forman al lado derecho se salio de la pantalla quedando solo la mitad a la vista, si me puedes ayudar con eso. Gracias

[@TecnoCodigo]

Puedes unirte al grupo de telegram o enviar los archivos al mail [e-mail] y vemos que puede ser

[@ValeriaHernandez-zg1ht]

Hola amigo, sabes que en la parte del menú desplegable no me aparecen las opciones para abajo, eso se debe a que?

[@TecnoCodigo]

le agregaste la parte del codigo de JavaScript?

[@danielabrigullio3669]

Holaa, una consulta. Veo que en el video, el sitio automaticmente se hizo responsive al primer momento que copiaste y pegaste el link del navbar. A mi no me pasa eso. Me aparece el navbar pero al achicar la ventana no se muestra responsive :(

[@TecnoCodigo]

Asegurate de tener agregado también el enlace al archivo del javascript que va al final de la pagina

[@marianojimenez990]

Buenas, hoy estuve tratando de hacer un menu hamburguesa con CSS y la verdad no pude hacerlo. Sin embargo sé CSS para hacer cosas más fáciles, ahora una pregunta, es realmente necesario saber estas cosas, como el menu hamburguesa o un menu despeglable? si hay frameworks como bootstrap que lo hacen por su cuenta?

[@TecnoCodigo]

Hola Mariano , yo trabajo como desarrollador hace 4 años , y en la mayoría de los proyectos usamos frameworks o librerías que ya resuelven esas cuestiones como el menú. Sin embargo si tu idea es ser un crack del frontend te lo recomiendo

[@marianojimenez990]

@@TecnoCodigo Gracias por responder!! Seguimos en la lucha entonces.

[@tavoilmnty2665]

Tengo una sección en mi página que está en el body y hace la función de un navbar pero es una lista de imágenes como haría?

[@TecnoCodigo]

puedes hacer asi...

[@romaportilla9841]

Me encantó el video!!!! Muchísimas gracias!!!! :D Solo tengo un problemita, no me funciona el link del dropdown. Los href de la lista del submenú sí, el href del dropdown de la lista del menú no :( saben por qué será??

[@CbastianAraque]

Hola, no sé si ya lo solucionaste, pero te dire la solución. Sucede que en Bootstrap 5 se cambio el uso de los atributos data-*, lo que debes haer, es dentro del menú que copias y pegas, a todos los data-* agregale el -bs, es decir, si tienes data-toggle ahora lo debes poner como data-bs-toggle, y así con los demás 😁😁 saludos!

[@marlonsaban]

No se si sea solo yo pero a la hora de poner todo el codigo como el la barra desplegable no funciona alguna solucion

[@TecnoCodigo]

recorda agregar las lineas de codigo del javascrip, sino no funciona

[@cristianhormazabal7710]

una consulta ,al tener un menu de hamburguesa con bootstrap 5 ,tengo el siguiente problema ,en pantallas chicas se muestra y todo pero al clickear fuera de el (contenido de la página) no se cierra automaticamente ,como le hago para que al pinchar afuera se cierre?

[@TecnoCodigo]

Hola Cristian, hasta donde se se puede hacer pero usando javascript

[@alexisgraff2049]

Hola genio, una consulta, cuando achicas la pantalla y todo el menu se va al boton desplegable, cuando despliega, aparece todo a la izquierda abajo de la foto, hay alguna manera de que lo haga abajo del boton desplegable? Muchas gracias !!

[@TecnoCodigo]

Hola Alexis, perdon la demora, si se puede , en tu hoja de estilo tienes que crear una clase, que pise la clase por defecto de bootstrap, la clase se llama: .navbar-nav y dentro debes colocar: align-items: flex-end; , osea te quedaria asi: .navbar-nav {align-items: flex-end;} Y otra cosa recuerda que la hoja de estilos tuya debe estar importada por debajo de la hoja de estilos de bootstrap, espero te sirva, saludos

[@alexisgraff2049]

@@TecnoCodigo GRACIAS !

[@chaos9584]

Hola amigo tengo un código pero al momento de presionar el menú de las 3 líneas no se despliega :c estoy re frustrado y he probado todo y nada

[@TecnoCodigo]

no te olvides de agregar el codigo del javascript que va al final del body

[@chaos9584]

@@TecnoCodigo efectivamente era eso mi bro, muchas gracias por tomarte el tiempo de responder. Ganas nuevo sub y mg a tu video

[@carlosmiguel8848]

Puedes pasarme el código de las 3 Líneas?:(

[@carlosmiguel8848]

Ocupó ese código en mi navbar

[@chaos9584]

@@carlosmiguel8848 te lo envío a tu correo?

[@enzomillo-rb2yi]

buen video amigo. puse un logo que hice con Canva pero el menu se hizo muy grande . sabes como cambiar el tamaño del menu, osea el navbar ?

[@TecnoCodigo]

seria mejor si la imagen del logo es mas pequeña para que no quede tan grande, quizas eso ayude

[@soliangelhernandez8825]

Hola! Una consulta, después de poner la referencia .HTML, cómo hago para colocar la página que quiero que aparezca?

[@TecnoCodigo]

en los elementos a, encontraras un atributo href, ahi debes colocar la pagina con la que quieres vincular el link, te dejo un video donde explico mas sobre enlaces: kzbin.info/www/bejne/l3uVpHWobrSKg8U

[@mmmmmvk]

Hola! Una consulta, mi navbar funciona perfecto con el menú hamburguesa y todo pero quiero los items estén a la derecha, ya probé con la clase ml-auto pero no funcionó y no encontré otra forma de solucionarlo desde las clases de bootstrap 🤔 sabrás como hacerlo? Muy bueno el vídeo 👍 Saludos!!

[@TecnoCodigo]

hola Macarena, si lo que puedes hacer es en tu propia hoja de estilos sobreescribes la clase de bootstrap llamada . sidebar , y le pones rigth: 0 ; left: auto

[@davidh6581]

Hola Amigo, Excelente video, podrías compartir el código ??

[@daneletee2231]

tecno una pregunta, hice lo mismo pero cuando voy a otra PAGINA del sitio web no se abre la hamburguesa. que puede estar pasando?

[@TecnoCodigo]

esa otra pagina también tiene que tener el código del javascript para que funcione

[@noraochoa4134]

@@TecnoCodigo ME PUEDES PASAR EL CODIGO

[@informaticasinpaja]

Hacerlo d forma vertical

[@manfredorojashurtado6900]

Hola! una duda, cuando pongo la imagen para el logo el primer item se baja, sabes como se arregla? Gracias por la ayuda!!

[@TecnoCodigo]

hola, chequea q la imagen del logo no sea demasiado ancha

[@VaquitaMuuu]

Podrías compartir el código?

[@TecnoCodigo]

pronto voy a hacer un repo con todos estos codigos

[@capscampoverde6660]

I’m trying

[@yatziryanalycruzcruz2332]

pasen el codigo escrito plis

[@TecnoCodigo]

Pronto comenzare a subirlos

[@mrbagins8716]

jajajaja pero sin copy paste :(

[@kevindominguez2117]

Que groso, nada de vueltas y bien explicado

[@TecnoCodigo]

Muchas gracias Kevin!