Estou tendo duas barras de navegação no meu site, uma no cabeçalho e outra no rodapé

A parte do cabeçalho está funcionando bem, mas o que eu quero é que o rodapé seja semelhante ao navbar, mas, quando vou na visualização móvel (viewport menor), aparece um botão de alternância (recurso de inicialização padrão), mas quando clica nessa alternância, ele desliza para baixo , e o conteúdo é exibido abaixo da barra de navegação, apesar de que alguém possa me ajudar nisso?

Não sei como incluir o Bootstrap no Fiddle, postando diretamente meu código de rodapé. inclui, arquivos de inicialização e arquivos Fontawesome no meu diretamente.

ObteveBootply ligação:http://bootply.com/104001

<footer>
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#footer-body">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="footer-bar-btns visible-xs">
                    <li><a href="#" class="btn" title="History"><i class="fa fa-2x fa-clock-o blue-text"></i></a></li>
                    <li><a href="#" class="btn" title="Favourites"><i class="fa fa-2x fa-star yellow-text"></i></a></li>
                    <li><a href="#" class="btn" title="Subscriptions"><i class="fa fa-2x fa-rss-square orange-text"></i></a></li>
                </ul>
            </div>
            <div class="navbar-collapse collapse" id="footer-body">
                <ul class="nav navbar-nav">
                    <li><a href="#">Browse Our Library</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Our Partners</a></li>
                    <li><a href="#">User Review</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>