When you decrease the browser window, the navigation bar collapses, but it does not open back, I would like the list to open when I click on the button. How to solve this problem?

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Simple landing page</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Merienda:700" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css"> <link href="css/style.css" rel="stylesheet" /> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toogle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Landy</a> <div class="nav-collapse collapse"> <ul class="nav pull-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Screenshots</a></li> <li><a href="#">Features</a></li> <li><a href="#">Download</a></li> </ul> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

Navigation bar Minimized Navigation Bar

  • where is popper.js ? - Pavel Igorevich
  • and can working your version on codepen.io or another sandbox? - Pavel Igorevich
  • @Pavel Igorevich on codepen.io everything works and in Visual Studio, for some reason not? Do not tell me what could be the problem? - The Elusive Joe
  • I asked to throw it on the codepen link, not just like that - Pavel Igorevich
  • @Pavel Igorevich here is the link codepen.io/Vasiliy7991/project/editor/AxVmNe - The Elusive Joe

2 answers 2

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="navbar-toggler btn btn-navbar" type="button" data-toggle="collapse" data-target=".nav-collapse" aria-controls="nav-collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Landy</a> <div class="nav-collapse collapse"> <ul class="nav pull-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Screenshots</a></li> <li><a href="#">Features</a></li> <li><a href="#">Download</a></li> </ul> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    The error was that instead of data-toggle wrote data-toogle

     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

    The previous version sent by Pavel Igorevich also unexpectedly earned.