• Friday , 24 November 2017

Tutorial Bootstrap 3: Barra de navegación y Menú (Nav y Navbar)

Code Canyon
https://i.ytimg.com/vi/sLos6pkMXK8/hqdefault.jpg



Tutorial Bootstrap 3: Barra de navegación y Menú

Otro elemento bastante típico y común en muchas páginas web es la zona de navegación, formada por enlaces a las zonas principales de la web, o por un menú de navegación, desplegable de enlaces, etc.
En esta guía creamos nuestra barra de navegación que tendrá la característica de ser responsiva.

Material y Código:
https://github.com/DevCodela/Guia-Bootstrap-3

Para seguir con esta iniciativa no te olvides de suscribirte al canal y seguirnos en facebook y twitter.

Twitter: https://twitter.com/DevCodela
Facebook: https://www.facebook.com/DevCode.la

Original source

3d Ocean

Related Posts

39 Comments

  1. abrahan flores
    August 17, 2017 at 20:40

    se escucha muy de fondo si puedes arreglar eso seria de mucho !

  2. Tiago Cori
    August 17, 2017 at 20:40

    no me funciona el menu cuando se achica la pantalla es deir el boon con las 3 rayistas no hace nada que puede ser? gracias

  3. Manuel Merino
    August 17, 2017 at 20:40

    Tengo un problema ya tengo un el menú junto con el logotipo pero lo que son las secciones del menú aparecen debajo del logotipo no a la par. Agradeceria de tu ayuda.

  4. Omar Adrián
    August 17, 2017 at 20:40

    ola una pregunta con q editor de texto estas trabajando, como haces que tu codigo se genere con solo div>ul>li*3>a
    gracias por el tuto

  5. Roger González
    August 17, 2017 at 20:40

    Hola yo quisiera saber como puedo alinear el menu al centro respecto a la página, es decir que los botones siempre queden al centro. espero me puedan ayudar y gracias por el vídeo.

  6. JOSE EDMUNDO RUIZ ROJAS
    August 17, 2017 at 20:40

    como haces en referencia?

  7. German Pace
    August 17, 2017 at 20:40

    Excelente tutorial, pero como haces cuando estas en un dispositivo móvil y queres que al hacer click en un elemento de navegacion la barra desaparezca , porque hay que hacer click continuamente en el boton de navegacion para que desaparezca

  8. URIEL FERNANDO PARRADO RAMOS
    August 17, 2017 at 20:40

    buen dia, estoy intentando hacer la parte del menu desplegable y no me funciona y ya intente con todo que puedo hacer

  9. alexhiz jimenez
    August 17, 2017 at 20:40

    no me funciona el menu desplegable, ya intente importando las librerias y nada..
    llame los archivos con estos scripts.. pero necesito tener conexion a internet para que pueda aser su funcion..
    <script src="js/vendor/jquery-1.11.0.min.js"></script>
            <script src="js/vendor/bootstrap.min.js"></script>

    PERO QUIERO QUE ME HAGA el menu despegable con estos.. por que importo
    <Script src"js/jquery.js"></script>
    <Script src"js/bootstrap.min.js"></script>

    AYUDA!!!!!!!

  10. juan carlos rojas
    August 17, 2017 at 20:40

    Muchas gracias por la informacio tan increible

  11. ismael castillo
    August 17, 2017 at 20:40

    como le hago para cambiarle el color hover a los sub menus?

  12. onzulin666
    August 17, 2017 at 20:40

    buenas tardes yo estoy teniendo muchos problemas para implementar el menu desplegable como explicas en este video, uso joomla 3.4.1 en mi web, bootstrap yo creo que estoy llamando bien a los archivos js y css con el codigo y a mi en mi pagina no me funciona el tutorial me sale un boton y listo algo que no deberia pasar saludos.

  13. Franklin Rivera
    August 17, 2017 at 20:40

    Hola Buen día, gracias por los tutoriales, me han servido de mucha ayuda, ya logre hacer el menú, pero estaba intentando cambiarle los colores y no puedo, quiero que se cambien los colores de las letras y del botón al pasar el cursor sobre él… Qué debería hacer??

  14. Jhon Alexander Perez Beltran
    August 17, 2017 at 20:40

    Buenas noches . tengo un problema . cuando le doy click a boton no aparece el menu de igual forma cuando le doy click a dropdown tampoco realmente tengo pegado 2 dias espero que me pueda ayudar gracias 

  15. Quito Tour Bus
    August 17, 2017 at 20:40

    Hola, excelente tutorial! una consulta,  como puedo centrar todo el menu?

  16. Edgardo Cruz Ramírez
    August 17, 2017 at 20:40

    Hola amigos, ante todo muchas gracias, sus videos son excelentes me han ayudado bastante. Pero hay un consulta que quisiera hacerles: ¿cómo se haría para crear un submenú dentro de otro submenú?. Por ejemplo si en el submenu BOOTSTRAP de su video se desprende otro submenú. Estoy usando bootstrap 3.3.2 . De antemano muchas gracias.

  17. Sobec Garcia
    August 17, 2017 at 20:40

    muy bien explicado gracias!

  18. Idea Vida
    August 17, 2017 at 20:40

    Hola, no se despliega el menu y no es el error de collaspe como comentan, que mas podría ser?

  19. Severus killer
    August 17, 2017 at 20:40

    Eres mi salvacion!, tutos perfectos muchas gracias!

  20. Roger Tello
    August 17, 2017 at 20:40

    hola, me encanto tu tutorial, buenisimo, de hecho lo hice funcionar en mi pc y funciono de maravilla, pero a la hora de que lo hago correr en un movil de verdad, simplemente toma la version de tablet, ya no se que hacer para arreglarlo. saludos

  21. Judelys Lagos
    August 17, 2017 at 20:40

    El menu no se cierra… 🙁 se mantiene siempre abierto T.T
    He buscado, y aún no se como solucionarlo

  22. scshuriel
    August 17, 2017 at 20:40

    hola que plugins utilizas para el sublimetext ??
     

  23. Orlando Arenas Guerrero
    August 17, 2017 at 20:40

    Resolví el problema El "error" del menu desplegable es que no llama los archivos de la carpeta vendor/js en <head>
            <script src="js/vendor/modernizr-2.6.2.min.js"></script>
            <script src="js/vendor/bootstrap.js"></script>
            <script src="js/vendor/jquery-1.11.0.min.js"></script>
            <script src="js/vendor/bootstrap.min.js"></script>
    Gracias por los tutoriales me agradan por que es muy concisos
      

  24. Rodrigo Avalos
    August 17, 2017 at 20:40

    cuales son los referenciales que colocas en tu head, porque no me correo bien el tuto

  25. Julio Rios
    August 17, 2017 at 20:40

    no me funciona el menu desplegable, ya intente importando las librerias y nada.

  26. Marisol Castillo
    August 17, 2017 at 20:40

    genial! me salvaste 😀

  27. Felipe Pino
    August 17, 2017 at 20:40

    por si le sirve a alguien: Hay un "." que no se nota al comienzo de "data target" del boton del navbar header [data-target=".navbar-ex1-collapse"]

  28. David Julian
    August 17, 2017 at 20:40

    excelente vídeo amigo pero! no se que pasa hice todo al pie de la letra pero al llevarlo a la pantalla tamaño móvil no se despliega la barra me podrías ayudar gracias?

  29. Andres Romero
    August 17, 2017 at 20:40

    socio un fa ise lo que indica el tutorial pero al momento de probarlo con un dispositivo móvil no se despliega hay que importar algo en especial 

  30. Daniel hidalgo López
    August 17, 2017 at 20:40

    y como personalizas el color y forma del menú en general? para crear un diseño personalizado completamente pero que no pierda la parte "responsive" (sin uso de templates)

  31. Daniel Esteban García
    August 17, 2017 at 20:40

    Que función cumplen los span con el class="icon-bar"

  32. Daniel Esteban García
    August 17, 2017 at 20:40

    Tengo el codigo bien y no me sirve la barra de navegación en la seccion de "tutoriales", que puedo hacer? Que librerías está importando? Porque yo tengo hasta las de bootstrap.js y aún así no se me despliega el menú, gracias!!

  33. Luis Alfonso Márquez Fdez. de Prada
    August 17, 2017 at 20:40

    Muchas gracias por vuestros magníficos video-tutoriales. Tengo una duda acerca de cómo hacer un submenú. No encuentro en Boostrap 3, la clase "submenu". ¿Me podéis indicar cómo hacerlo?. Gracias de nuevo

  34. DulceAdiccion
    August 17, 2017 at 20:40

    Gracias me estan sirviendo mucho tus videos solo me gustaria que explicara un poco mas para que sirve cada cosa como data-toggle que es el toggle y en si las diferencias del nav y navbar y cositas asi pero esta bien ahi uno se va dando cuenta muchas gracias.

  35. nativolink
    August 17, 2017 at 20:40

    lo hice todo 3 veces verifique toda la sintaxis …y cuando lo pruebo para movil ,no se despliega 

  36. Mousike
    August 17, 2017 at 20:40

    Hola que tal, buen video, pero tengo una duda o dudas, quiero cambiar el color de las letras del menú pero no sé como hacerlo cómo podría personalizar el diseño en esos aspectos? … intente poner un menú que no es de bootstrap pero cuando lo meto en su código a la hora de adaptarlo a la versión mobil el menú no se despliega en lista cuando le das clic al icono "de las 3 lineas" y aparece de corrido. Espero me pueda ayudar, saludos.

  37. Jordi Ortega
    August 17, 2017 at 20:40

    Tengo una duda, no hace falta entonces media querys con este sistema de grid?
    y para que las utilizariamos entonces?

  38. nativolink
    August 17, 2017 at 20:40

    como haces para hacer el auto completado asi …ejemplo( ul>li*4 )

  39. Perla Rdz Almazán
    August 17, 2017 at 20:40

    hola, oye tengo un problema, estoy tratando de aplicar lo que muestras en tu tutorial, pero cuando presiono el botón no se despliega el contenido del navbar, como si no tuviera nada. Ojalá pudieras ayudarme

Leave A Comment

You must be logged in to post a comment.