Bootstrap navigation nav-collapse dropdown doesn't works on mobile

Question

I know there are several topics concerning the same problem but none of these worked for me.

It seems my dropdown navigation just works fine on full screen, but when I downsize my screen to mobile size and I click on the dropdown menu item it doesn't seems to work and the navigation is closed.

Here's the code im using:

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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 class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="col-sm-2">
                <div class="logo text-center text-center"><figure><img src="img/hbo-logo.png" alt="HBO Jobscore Logo"/></figure></div>
            </div>
            <div class="col-sm-2">
                <div class="logo text-center text-center"><figure><img src="img/bouwtalent-logo.png" alt="Bouwtalent Logo"/></figure></div>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a class="page-scroll" href="#page-top">Home</a></li>
                <li><a class="page-scroll" href="#about">Over Ons</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Informatie voor... <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a type="button" style="cursor:pointer" data-toggle="modal" data-target="#bol-studenten">Bol-4 studenten</a></li>
                    <li class="divider"></li>
                    <li><a type="button" style="cursor:pointer" data-toggle="modal" data-target="#hbo-studenten">HBO studenten</a></li>
                    <li class="divider"></li>
                    <li><a type="button" style="cursor:pointer" data-toggle="modal" data-target="#hbo-studenten">Trainees</a></li>
                    <li class="divider"></li>
                    <li><a type="button" style="cursor:pointer" data-toggle="modal" data-target="#scholen">Scholen</a></li>
                    <li class="divider"></li>
                    <li><a type="button" style="cursor:pointer" data-toggle="modal" data-target="#bedrijven">Bedrijven</a></li>
                  </ul>
                </li>
                <li><a class="page-scroll" href="#contact">Contact</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Offcourse I implemented the Bootstrap CSS and JS correctly.

If you could help me to figure out whats going wrong I would be very thanksfull!