Bootstrap hamburger menu isn't working on phone - html

Question

I have tried to find the issue, but nothing works for me.
If I am resizing the browser the hamburger menu wil pop up and work, but when I take a look on my phone it doesn't work.
Did I really do something wrong?
The code I am using:
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Roy van Eerden</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Portfolio</li>
<li>Over</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You can see it live at: www.royvaneerden.com/
Screenshot of the phone example:

Answer 1

Just Place jquery.js above bootstrap.min.js
also, add meta in head
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
Check here

Answer 2

just add this meta tag in head
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

You are missing the whole html part, please replace what you have with the nav from here(w3school Documentation).
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
or by checking the link Collapse Menu Bootstrap