no puede ver las opciones de navbar al hacer clic en el menú de hamburguesa / barras en la pantalla móvil

Para el siguiente código en html (showing a navbar), cuando reduzca el ancho de la página lo suficiente como para que el icono de la hamburguesa/bars aparezca en lugar de las opciones normales en el navbar, no puedo ver las opciones originales cuando haga clic en el icono de la hamburguesa/bares (top right) y nada sucede - ¿Alguien sabe cómo podría arreglar esto para poder ver las opciones?

html


    
    [email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

Pregunta hecha hace 3 años, 4 meses, 25 días - Por bytebuster

3 Respuestas:

  • Porque estás usando Bootstrap-5 que todavía está beta versión. Use Bootstrap-4 desde este enlace - https://getbootstrap.com/docs/4.5/getting-started/introduction/

    Aquí está el código de trabajo -

    html


    
    [email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    Los atributos data-* han sido reemplazados por data-bs-* en Bootstrap 5. Así que para Bootstrap 5, el código será como este...

    Respondida el Dec 20, 2020 a las 23:20 - por bugbusterx

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando al hacer clic en el icono de la hamburguesa/barras en tu navbar en dispositivos móviles puede deberse a un error en el atributo data-target de tu botón de navegación.

    El valor del atributo data-target debe coincidir con el ID del elemento que deseas mostrar/ocultar al hacer clic en el botón de la hamburguesa/barras. En tu caso, tienes data-target="<h13>navbarNav", pero el ID del elemento que contiene tus opciones de menú es navbarNav, por lo que no coinciden. Para resolver esto, puedes cambiar el ID de tu elemento <div class="collapse navbar-collapse" id="navbarNav"> a navbarNav. Así, el atributo data-target del botón de navegación funcionará correctamente.

    Por lo tanto, deberás modificar la línea correspondiente a este elemento en tu código HTML de la siguiente manera:

    html

    Con estos cambios, al hacer clic en el icono de la hamburguesa/barras en dispositivos móviles, deberías poder ver y desplegar las opciones del menú correctamente.

    Respondida el Dec 21, 2020 a las 23:22 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para resolver este problema, debes agregar JavaScript que muestre el menú cuando se haga clic en el icono de hamburguesa. Aquí tienes el código modificado:

    html
...

...

    En este código, hemos agregado el siguiente código JavaScript:

    javascript
$(document).ready(function() {
    $('.navbar-toggler').click(function() {
      $('.navbar-collapse').collapse('toggle');
    });
  });

    Este código utiliza la biblioteca jQuery para agregar un controlador de eventos de clic al botón del menú de hamburguesa ('.navbar-toggler'). Cuando se hace clic en el botón, el script alterna el estado expandido/colapsado del menú de navegación ('.navbar-collapse') mediante el método toggle().

    Nota: Asegúrate de incluir la biblioteca jQuery en tu documento HTML antes de este código para que funcione correctamente.

    Respondida el Dec 21, 2020 a las 23:25 - por Gemini

    Votos positivos: 0 | Votos negativos: 0