Así que estoy tratando de hacer un buen encabezado en la parte superior de mi sitio Django que colapsa cuando alguien tiene una ventana pequeña o está en un dispositivo móvil. El menú de navegación se contrae bien y se ve muy bien. Sin embargo, cada vez que hace clic en el botón del menú contraído (el icono de la hamburguesa), no sucede nada cuando debería expandirse el menú. Me he asegurado de que mi realmente apunta a lo correcto, que es ".navbar-collapse". He examinado otras preguntas como this que muestran ejemplos que funcionan con las mismas cosas que yo, así que no estoy seguro de por qué no me funciona.

Aquí es donde configuro mi barra de navegación:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">My Name</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
                <li><a href='/'>Home</a></li>
                <li><a href='/blog/'>Blog</a></li>
                <li><a href='/projects/'>Projects</a></li>
                <li><a href='/resume/'>Resume</a></li>
                <li><a href='/contact/'>Contact</a></li>
      </ul>
    </nav><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

¿Alguna idea?

0
user3308335 15 dic. 2016 a las 04:11

2 respuestas

La mejor respuesta

Su código parece funcionar bien, lo más probable es que el problema tenga que estar con sus CDN de jquery y / o bootstrap.js. Inserte los CDN correctos.

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">My Name</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
                <li><a href='/'>Home</a></li>
                <li><a href='/blog/'>Blog</a></li>
                <li><a href='/projects/'>Projects</a></li>
                <li><a href='/resume/'>Resume</a></li>
                <li><a href='/contact/'>Contact</a></li>
      </ul>
    </nav><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
1
AVI 15 dic. 2016 a las 01:39

Para otros que llegarán aquí mediante una búsqueda en la web:

Tuve el mismo problema, no poder expandir una barra de navegación, pero todo mi código estaba bien.

Mi problema era que tenía un bloqueador de anuncios a nivel de red que estaba bloqueando algunos de mis scripts CDN.

Facepalm.

La respuesta de @ AVI me ayudó a llegar a esta conclusión, revisa tu CDN

0
Community 20 jun. 2020 a las 09:12