Bootstrap Navigation Bar Not Working - html

Question

This is only my second question here on Stack overflow so if there is any additional information you need or clarification needed on anything I say, please don't hesitate to ask.
I tried looking into this question and did find some people here with a similar issue, but none of the fixes that helped with them worked for me.
I am looking to have my navigation bar hidden when the max width doesn't exceed more than 767px. When it goes below that pixel amount, it should become a drop down menu that should collapse and expand when clicked by the button. This does not seem to be working for me.
My code is as follows
HTML
<header class="pull-center" id="masthead">
<nav class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="brand brand-ctg" href="#section-1"><span></span></a>
CTG
<span></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li>Demo Reel</li>
<li>Portfolio</li>
<li><a class="brand brand-ctg" href="#section-1"> <span></span></a></li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
CSS
#media (max-width: 767px) {
.nav-collapse .nav > li {
float: left !important;
}
.navbar .in .nav li {
display: block;
float: none;
width:100%;
}
.navbar .nav > li > a {
color: #fff !important;
float: none;
margin-right: -3px !important;
padding: 0 40px 10px !important;
text-decoration: none;
}
.navbar .nav {
margin-top: 0 !important;
position: fixed!important;
z-index: 1;
}
.nav-collapse .brand {
display: block !important;
}
.navbar .nav .active a,
.navbar .nav > li > a:hover,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
background-color: transparent;
box-shadow: none;
color: #2d2e2d !important;
}
.navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: 30px;
}
.navbar-fixed-bottom {
margin-top: 30px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {
margin: -10px 40px 0 0;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 15px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: #555555;
text-shadow: none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 9px 15px;
font-weight: bold;
color: #555555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #f2f2f2;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
color: #999999;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
background-color: #111111;
}
.nav-collapse.in .btn-group {
margin-top: 5px;
padding: 0;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
float: none;
display: none;
max-width: none;
margin: 0 15px;
padding: 0;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .nav > li > .dropdown-menu:before, .nav-collapse .nav > li > .dropdown-menu:after {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 15px 15px;
margin: 15px 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
border-top-color: #111111;
border-bottom-color: #111111;
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
overflow: hidden;
height: 0;
background: #3b3b3b;
}
.navbar .btn-navbar {
background:url(http://www.colorthegrayscale.com/images/icons/hover-teal.png);
display: block;
width: 25px;
height: 50px;
position: fixed;
}
.navbar-static .navbar-inner {
padding-left: 10px;
padding-right: 10px;
}
.navbar .brand.brand-ctg span {
display: none !important;
}
EDIT 1
Tried to fix it, but still having my issue. I know some CSS is making the toggle button not work, I just can't seem to figure out what. For the sake of simply showing all my work in one place, you can find the test site here

Answer 1

You are overriding the bootstrap CSS styles when it is not need, so here is an example of a simple navbar based on twitter bootstrap:
Bootply DEMO
Snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
See Twitter Bootstrap Navbar Docs
EDIT: Based on your comment/updated question
here is your issue:
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<!-- <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> -->
<a class="brand brand-ctg" href="#section-1"><span>CTG</span></a>
</a>
you are opening an a inside another a and that's invalid HTML. Here's how to fix it (according to Docs):
<button type="button" class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand brand-ctg" href="#section-1"><span>CTG</span></a>
EDIT2:
I was looking and you are using an old version of bootstrap.css (v.2.2.1), the latest stable is 3.3.6, and you are missing the bootstrap.js (which make the menu to trigger when it is collapsed)