Bootstrap mobile navbar is open on load and won't toggle

Hey guys I am a little confused to why my mobile navbar is open on page load and won't toggle. I have copied the code from my other mobile navbar that I made however I am obviously missing.

Just so you know the navbar only displays for small devices as the navbar for large devices is separate.

Here is the fiddle

Here is my HTML:

<div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg">
    <div class="container">
        <button class="visible-sm visible-xs navbar-toggle" type="button"
                data-target="#i-want-this-to-collapse" data-toggle="collapse" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
        </button>
        <a class="mini-navbar navbar-brand" href="/">
            <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo"
                 class="img-rounded logo-nav mini-navbar" />
        </a>
        <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Join us</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    About<strong class="caret"></strong>
                </a>
                <ul class="dropdown-menu">
                    <li> <a href "#">The Team</a></li>
                    <li> <a href "#">Our Partners</a></li>
                </ul>
            </li>
            <li><a href="#">How To Find Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>

Here is my CSS:

<!-- language: lang-css -->

.mini-navbar {
	opacity: 1;
	padding: 5px 0;
}

@media only screen and (max-width : 992px) {
    /*body {display: none;}*/
    .navbar-nav > li {
        float: none;
    }
    .navbar-nav {
        float: none;
    }
    .nav.navbar-nav {
        clear: both;
        float: left;
        margin: 0 0 0 -15px;
        width: 100%;
    }
	.navbar-default .navbar-nav>li>a {
		border: none;
	}
	
	.navbar-nav > li:last-child {
		border: none;
	}
	.navbar-default {
	
	}
}

Any idea where I am going wrong?

You need to wrap your toggle button and navbar-brand anchor inside a navbar header:

<div class="navbar-header"><!-- --></div>

You need to wrap your list of navbar-nav menu items inside of a navbar collapse section:

<div class="navbar-collapse collapse"><!-- --></div>

Most importantly, the data-target used for toggling takes a CSS selector of the section you want to toggle. You currently have:

<button data-target="#i-want-this-to-collapse" data-toggle="collapse" >

But there is nothing that matches the selector #i-want-this-to-collapse, namely, something with that ID. So add one to your navbar-collapse:

<div class="navbar-collapse collapse" id="i-want-this-to-collapse">

Here's a working demo in fiddle

Check the fiddle for the full code.

In the future, I'd start with an example from the docs and work your way toward your own solution so you can find out where you've broken it along the way. Pause, and take a couple steps back to see if it makes sense. If not, ask that question because it's likely to be a much better question i.e. why does x not work? I thought it would do y.