T Dirix T Dirix - 17 days ago 9
CSS Question

Collapsed boostrap navbar wont open

I've recently added a collapsed navbar to my website using bootstrap. The problem is it wont open when I click on the hamburger menu.

I've checked the topics I could find about this issue and went through the solutions that they offered, yet none of them seemed to work for me.

Here is a part of my code:



<!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>





You can also check the live website on www.tomdirix.be

I think I've made sure the data-target is correct, the jquery is loaded before the bootstrap js, the console is errorless, ...

Please help, it would be greatly appreciated!

GvM GvM
Answer

your scripts at the bottom should be src not href

<!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 src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

  </body>
</html>