Issue with Bootstrap Navbar Toggle and Data Tables

I have an issue with the collapsible navbar made with bootstrap. When I reference the Data Tables CDN links in my head, my menu will NOT collapse after opening it in a mobile window. It flickers really fast to closed and then re-opens. Basically I can't close it. If I remove the DataTables cdn references then everything works fine.

Here is my navbar code:

 <div class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header navbar-left">
            <center>
                <button type="button" class="navbar-toggle navbar-text" data-toggle="collapse" data-target=".navbar-collapsev">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </center>
        </div>
        <nav class="navbar-collapse collapse">

//etc.....

here are my CDN links:

<!-- DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11,cr-1.3.1,r-2.0.2/datatables.min.css" />

<script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/jq-2.2.0,dt-1.10.11,cr-1.3.1,r-2.0.2/datatables.min.js"></script>