All geek questions in one place

Toggle button crashes in Bootstrap navbar

My toggle button does not work when navigation is minimized. I checked the data target several times and it looks fine.

Here is my code:

<div class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html" title="The Title"> <img style="max-width:100px;" src="images/LOGO-4.png"> </a> <div class="collapse navbar-collapse navbar-collapse"> <ul class="nav navbar-nav pull-right"> <li class="active"><a href="#">WORK</a></li> <li><a href="#">CONTACT</a></li> </ul> </div>

Does anyone know what the problem is and how can I fix it?

+6
source share
5 answers

Of course, the toggle button will differ depending on the screen resolution. Try something line by line:

  <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body > <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html" title="The Title"> <img style="max-width:100px;" src="images/LOGO-4.png"> </a> </div> <div class="collapse navbar-collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav pull-right"> <li class="active"><a href="#">WORK</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

Try it on your mobile phone and see. Then go to your css file and set the properties for the screen size to WHEN the switch button should appear. The switch button may not appear on the desktop until you change these properties or change the size of your browser window smaller and smaller until the switch button appears.

Eg. Maximized in the browser window, the toggle button is not displayed. Toggle bar not shown However, if you resize the browser window by half (or if you are surfing on the phone), it will look like this When on mobile or a reduced browser size

To fix this, you need to go into css settings. But this is ONLY if you want to change it. Otherwise, it will work fine.

+5
source

See that you have the correct library import, I have the same problem, I don’t understand why sometimes it has strange behavior with a different version of jQuery

try it

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="../navbar/">Default</a></li> <li><a href="../navbar-static-top/">Static top</a></li> <li class="active"><a href="./">Fixed top</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav>
+3
source

Hope this helps, because I had the same issue, and fixed it as follows:

 <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> ... </nav> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body>
+1
source

Default navbar - JavaScript required

If JavaScript is disabled and the viewport is narrow enough that the navigation is minimized, it will not be possible to expand the navigation panel and view the contents in .navbar-collapse.

The response navigator requires that the Collapse plugin be included in your version of Bootstrap

+1
source

Every time we encounter this problem, “why does the navbar-toggle button not work?”, But this time we found a solution and thank the Google Chrome developers for the developers who clearly showed an error.

We must include the jquery library file before loading the javascript file.

+1
source

Source: https://habr.com/ru/post/977800/

More articles:


All Articles