Bootstrap navigation bar does't shrink in mobile view - html

Question

Its a bootstrap agency landing page, The navigation bar functions properly in the desktop view and on the files that are kept offline.
But on the online version the navigation bar doesn't shrink when put into mobile view.
Link to the inline site.
This is how the navbar should work in mobile view
Navigation bar code:
.navbar-default .navbar-brand {
/*font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
color: #fed136;*/
}
.logo{
position:fixed;
/*size:10px;*/
width:160pt;
height:auto;
padding-top: 10px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
color: #fec503;
}
.navbar-default .navbar-collapse {
border-color: rgba(255,255,255,.02);
}
.navbar-default .navbar-toggle {
order-color: #C51D1D;
background-color: #CA2222;
/*top: 31px;*/
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #CA2222;
}
/* Drop down */
#drop li ul li {
border-top: 0px;
}
/*Navigation text*/
.navbar-default .nav li a {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 100;
font-size:15px;
letter-spacing: 1px;
color: #fff;
}
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
outline: 0;
color: #009DF7;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 0;
color: #fff;
background-color: rgba(255, 0, 0, 0.66);
}
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #fff;
background-color: rgba(255, 0, 0, 0.66);
padding-top: 15px;
}
#media(min-width:768px) {
.navbar-default {
padding: 25px 0;
border: 0;
background-color: transparent;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-default .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 3px;
}
/*navigation color*/
.navbar-default.navbar-shrink {
padding: 3px;
background-color: rgba(0, 0, 0, 0.57);
}
.navbar-default.navbar-shrink .navbar-brand {
font-size: 2em;
}
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 page-scroll" href="#page-top"><img class="logo" width="80%" src="img/logos/U2.png" style="
margin-top: -22px;
"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 0px;">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
</li>
<li class="">
<a class="page-scroll" href="#services">Tandem skydiving</a>
</li>
<li class="">
<a class="page-scroll" href="#learn">Learn to skydive</a>
</li>
<li class="">
<a class="page-scroll" href="#hubs">microlite and paragliding</a>
</li>
<li class="">
<a class="page-scroll" href="#book">BOOK NOW</a>
</li>
<li class="">
<a class="page-scroll" href="#socialmedia">About us</a>
</li>
<!--<li>
<a class="page-scroll" href="#team">Team</a>
</li>
<li>
<a class="page-scroll" href="#contactus">connect</a>
</li>-->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Answer 1

Man you just use the Bootstrap CDN reference for online lookup. this Code is working with CDN connectivity. So please link CDN bootstrap css and script.

Answer 2

The problem on this page http://iloveskydiving.in/coco is that you are missing the meta viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
When looking at this page: http://sky.promile.co/coco/ (the "original" one, where the iframe pulls its content) it's working fine. You need to add the meta tag also to the code of the first page. (why using an iframe by the way?)