Не работает кнопка меню, где ошибки?

1

Не работает кнопка меню,не могу найти ошибку

<button type="button"  data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                
                  <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 id="navbarCollapse" class="collapse navbar-collapse navbar-right">
              <ul class="nav nav-pills">
              
                  <li class="active"><a href="#">Главная</a></li>
                  <li><a href="#">Фильмы</a></li>
                  <li><a href="#">Сериалы</a></li>
                  <li><a href="#">Рейтинг фильмов</a></li>
                  <li><a href="#">Контакты</a></li>



              </ul>
bootstrap

6 ответов

0

Если кнопка не нажимается, проверь подключение js файла:

 <script src="js/bootstrap.min.js"></script>

Поставь вместо него такое подключение с сервера:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Запустил твой код с этим js, работает меню.

 

0

Я и говорю по js файл, попробуй код подключить как я написал, я попробовал на твоём коде, работает

0

Обновил wordpress

С мобильной версии перестала срабатывать кнопка, которая открывает меню 

Я особо не разбираюсь, может кто поможет советом куда смотреть?

0

Покажите весь код полностью и HTML и CSS, попробую помочь. 

0

.header a, a:hover{
	color:#f0ad4e;
	text-decoration: none;

}	

.header h1{
	letter-spacing: 15px;
	font-size: 300%;
}
.header p{
	color: white !important;
	font-size: 90%;
	letter-spacing: 3px;

}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #337ab7;
}
.nav-pills>li>a:hover {
	color: white;
    background-color: #337ab7;

}
.navbar-inverse {
  
    
    padding: 1%;
}
@media (max-width: 767px){
	.nav-pills-li->li{
		float: none;
	}

	.nav-pills{
		text-align: center;


	}
}

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <div class="container-fluid">
        <div class="row">
          <nav role="navigation" class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header header">
                    <div class="container">
                      <div class="raw">
                        <div class="col-lg-12">
                          <h1><a href="#">Киномонстр</a></h1>
                            <p>Кино - наша страсть!</p>

                        </div>



                      </div>
                        


                    </div>             
                  




                  <button type="button"  data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                
                  <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 id="navbarCollapse" class="collapse navbar-collapse navbar-right">
              <ul class="nav nav-pills">
              
                  <li class="active"><a href="#">Главная</a></li>
                  <li><a href="#">Фильмы</a></li>
                  <li><a href="#">Сериалы</a></li>
                  <li><a href="#">Рейтинг фильмов</a></li>
                  <li><a href="#">Контакты</a></li>



              </ul>





            </div> 
          </div>
        </nav>
      </div>
    </div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
0

Спасибо за ответ!Правда забыл уточнить , что меню не работает меню в виде трех полосок, используемое при низком разрешении. А именно не открывается.

Sign up or Log in to write an answer