Bootstrap dropdown menu not appearing/working - html

Question

I've been searching for a solution all day and tried many different things but so far, no luck. The navbar-toggle (hamburger menu) appears when reducing the window but the menu doesn't appear when clicking on the button (hamburger menu). What's particularly disturbing: the menu background is open when first loading the page.
Note that I don't call for the bootstrap.css within the header because I want to customise my components directly in my style.css file. Using Bootstrap, am I obliged to call for bootstrap.css and customise within it directly to make it work or can I just pick selected elements from bootstrap.css and copy them in style.css to make it work?
That's the html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a class="navbar-brand page-scroll" href="#page-top"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" >
<ul class="nav navbar-nav" >
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href=".contact">CONTACT</a>
</li>
<li>
<a class="page-scroll" href=".recommendations">ABOUT</a>
</li>
<li>
<a class="page-scroll" href=".work">WORK</a>
</li>
</ul>
</div>
</div>
</nav>
All the scripts are within the body at the end
<!-- JQUERY -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
And the css
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{
display: block;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
background-color: #08293C;
}
.navbar-fixed-top{
top: 0;
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.container {
margin-right: auto;
margin-left: auto;
width: 500px;
}
button{
display: none;
}
.logo {
float: left;
width: 209px;
padding-top: 2px;
height: 29px;
background: url(../images/logo.svg);
background-repeat: no-repeat;
margin-top: 6px;
}
.logo a{
width: 209px;
height: 29px;
}
.nav {
margin: 0px auto;
width: 500px;
cursor:pointer;
font-weight: 100;
font-size: 9pt;
letter-spacing: 4px;
}
nav ul {
padding:0px;
margin:0px;
cursor:pointer;
}
nav li {
display:inline;
margin-top: 23px;
margin-left:20px;
color: #FFFFFF;
float:right;
}
nav a {
color: #FFFFFF;
text-decoration: none;
display: block;
}
nav a:hover {
color: #B4C6D1;
}
ul.nav li.iconhb {display: none;}
.hidden{
display: none!important;
}
#media only screen and (max-width: 767px) {
.navbar-toggle {
display: none;
}
}
#media only screen and (max-width: 575px) {
.container{
margin-left: 5%;
margin-right: 5%;
width: auto;
}
.navbar-toggle{
position: relative;
float: right;
margin-top: 12px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar{
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar{
margin-top: 4px;
}
.navbar-toggle{
display: block;
}
button{
cursor: pointer;
}
.navbar-toggle .icon-bar{
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar{
margin-top: 4px;
}
.icon-bar{
background-color: white;
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
height: 200px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
overflow-y: visible;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
ul.nav.responsive li {
float: none;
display: inline;
}
/* hide menu display iconhb */
ul.nav li:not(:first-child) {display: none;}
ul.nav li.iconhb {
float: right;
display: inline-block;
}
/* responsive nav */
ul.nav.responsive {position: relative;}
ul.nav.responsive li.iconhb {
position: absolute;
right: 0;
top: 0;
}
ul.nav.responsive li {
float: none;
display: inline;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
}

Answer 1

Code below can run exactly what you want.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</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>
</div>
</div>
</nav>
</body>
</html>