Navigation bar won't toggle - html

Question

The button to toggle the nav bar won't function. I've checked through the answers to similar questions and can't see anything wrong with my html. Help much appreciated!
I can see all the li items in my navbar but cannot hide them.
Here's the relevant html:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="home">Simmo Simpson</a>
</div>
<div class="pull-right">
<ul class="nav navbar-nav">
<li>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</li>
</ul>
</div>
<div id="#myNavbar" class="collapse navbar-collapse" >
<ul class="nav navbar-nav pull-left">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active"><a href="#contact" >Contact</a></li>
</ul>
</div>
</div>
</nav>
I've also included this at the bottom (and stylesheets etc in the meta section):
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

First off, add type="text/javascript" to the script tags for jquery/javascript includes.
Thirdly, check your server/site/browser configuration in terms of 'cross-site scripting'. I believe this may be your issue here. When you call a script with cross-origin, you are trying to execute the script remotely and for security purposes this tends to be disabled by default for a lot of web sites and/or servers. To get around this, I would recommend downloading the bootstrap CSS/JS files and referencing them from your sites director as apposed to a CDN.
I also see that you had an issue where by you included a '#' in an element id;
<div id="#myNavbar" class="collapse navbar-collapse" > - Upon fixing this the code stopped working, this is because you may not have changed the target ID of the bootstrap toggle button, see; <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">.
In both of these lines the ID's need to match, that being the ID of the navbar element to be toggled, and the button that does the toggling.