Przycisk dla urządzeń mobilnych nie działa prawidłowo

Zacząłem tworzyć swoją pierwszą stronę w frameworku Bootstrap i natrafiłem na problem przy Menu górnym.
gdy zmieniam rozmiar okna do bardzo małych rozmiarów pojawia się po prawej stronie przycisk który przechowuje w sobie wszystkie Itemy z menu górnego.
Niestety po kliknięciu go nic się nie dzieje.

Index.html:

      <header id="menu" class="navbar-fixed-top">
        <div class="container">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <nav class="navbar navbar-inverse" role="navigation" id="pasek_nawi">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#moje-menu">
                                <span class="sr-only">Nawigacja</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <div id="logo">
                                <a class="navbar-brand" href="#"><img src="../img/Logo.png" class="img-responsive" alt=""></a>
                            </div>
                        </div>
                        <div class="collapse navbar-collapse" id="moje-menu">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="active"><a href="#nowosci">Nowosci</a></li>
                                <li class="active"><a href="#home">Home</a></li>
                                <li class="active"><a href="#produkty">Produkty</a></li>
                                <li class="active"><a href="#zespol">Zespół</a></li>
                                <li class="active"><a href="#blog">Blog</a></li>
                                <li class="active"><a href="#pomoc">Wspomóż nas</a></li>
                                <li class="active"><a href="#promocje">Promocje</a></li>
                                <li class="active"><a href="#kontakt">Kontakt</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </header>
 

Index.css

 body{

	font-family: 'Open Sans';
	color: #34495e;
	background-color: #ffffff;
}

.btn-success{
	background-color: #1abc9c;
	border-color: #1abc9c;
	margin-top: 4rem;
}

.btn-success:hover{
	background-color: #48c9b0;
	border-color: #48c9b0;
}
#menu{
	background-color: #1abc9c;
}

.navbar{
	background-color: #1abc9c;
	font-size: 1.7rem;
	color: #ffffff;
	padding-top: 3rem;
	border-color: #2c3e50;
}

.navbar-outer{
	width: 1200px;
}

.navbar-inverse .navbar-nav > li > a{
	color: #ffffff;
	margin-left: 5px;
	border: 1px solid transparent;
	line-height: 1rem;
}

.navbar-inverse .navbar-nav > li > a:hover{
	display: block;
	color: #FFF;
	border: 1px solid transparent;
	border-color: #FFF;
	line-height: 1rem;
	border-radius: 4px;
	transition: all 0.7s ease;
}

.navbar-inverse .navbar-nav > li > a:active {
	display: block;
	border-color: #ffffff;
	border-radius: 4px;
}

.navbar-inverse .navbar-nav > .active > a:hover{
	color: #FFF;
}

#logo img{
	display: block;
	float:  none;
	margin-top: -2.7rem;
	padding-left: -40px;
	height: 64px;
	width: 64px;
}
 

Wrzuć na jsfiddle to powinno już być odruchowo robione bo to nie matematyka gdzie można znaleźć błąd patrząc na działania.