0
Недавно я добавил русскую навигационную панель на мой сайт с помощью бутстрапа. Проблема в том, что он не откроется, когда я нажму на меню гамбургера.Collapsed boostrap navbar wont open
Я проверил темы, которые я смог найти по этой проблеме, и воспользовался предлагаемыми ими решениями, но ни один из них не работал для меня.
Вот часть моего кода:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> Tom Dirix - Multimedia Designer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400">
<style>
.container-fluid {
padding: 0px !important;
}
.row {
margin: 0px !important;
}
/**** navigatie ****/
.navigatie {
-webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
-moz-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
-ms-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
-o-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
}
.navbar-brand {
padding: 0px;
}
@media (max-width: 767px) {
.navbar-default .navbar-brand {
height: 60px !important;
}
}
.navbar-default .navbar-brand {
background-color: #D33E2A;
color: #F8F8F8;
position: absolute;
line-height: 60px;
text-align: center;
height: 90px;
width: 60px;
font-family: "Times New Roman", Times, serif;
font-size: 50px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #F8F8F8 !important;
background-color: #D33E2A;
}
.navbar-default .navbar-brand>img {
padding: 7px 14px;
}
.navigatie .nav >li >a {
padding-top: 25px;
padding-bottom: 25px;
padding: 20px;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 300;
}
.navigatie .navbar-toggle {
padding: 10px;
padding-top: 15px;
padding-bottom: 15px;
border: 0px;
}
.navbar-header{
font-size: 16px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #403E40;
}
.navbar-header .navbar-toggle:hover .icon-bar,
.navbar-header .navbar-toggle:focus .icon-bar {
background-color: #D33E2A;
}
.navbar-header .navbar-toggle:hover,
.navbar-header .navbar-toggle:focus {
background-color: #F8F8F8;
}
.navbar-alignit .navbar-header {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 50px;
}
.navbar-alignit .navbar-brand {
top: 50%;
display: block;
position: relative;
height: auto;
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
transform: translate(0,-50%);
margin-right: 15px;
margin-left: 15px;
}
body {
font-family: "Raleway";
background-color: #F5F5F5;
}
/* navbar */
.navbar-default {
background-color: #F8F8F8;
border: 0px;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #403E40;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #D33E2A;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #D33E2A;
background-color: transparent;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #403E40;
background-color: #D5D5D5;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navigatie">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigatie">
<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="http://www.tomdirix.be">T</a>
</div>
<div class="navbar-collapse collapse" id="navigatie">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="http://www.tomdirix.be">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<script href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>Вы также можете проверить живой сайт на www.tomdirix.be
Я думаю, что я сделал, что данные, цель правильно, jquery загружается до загрузки js, консоль без ошибок, ...
Please помощь, было бы весьма полезно!
нет проблем :) рад, что помог – GvM