Bootstrap navigation does not work correctly. In the mobile version, when the list (items) of the menu should be minimized - this does not happen. Only the menu background is collapsed. The bulleted list itself remains fixed. How to fix it and how to make the default menu was minimized? Here is the code

<nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> <div class="collapse navbar-collapse" id="responsive-menu"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> <li><a href="#">Пункт 4</a></li> <li><a href="#">Пункт 5</a></li> </ul> </div> </nav>

    1 answer 1

     <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> <div class="collapse navbar-collapse" id="responsive-menu"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> <li><a href="#">Пункт 4</a></li> <li><a href="#">Пункт 5</a></li> </ul> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> </body> </html>

    I connected everything, and did it here, run it, look, everything works ok ...

    • no, it's okay, checked - Bohdan
    • Then wait for other people with experience) Just launched this code at your place, everything is ok. - Ilya Burmaka
    • The bulleted list itself does not collapse, and the menu (background) collapses and unfolds (just below the height of the list) without problems, Can a class be either skipped or another attribute? - Bohdan
    • i am using grunt collector can in this case? - Bohdan
    • I didn’t work with him, so I won’t say that. Experience behind a huge not reached. - Ilya Burmaka