Tengo dos barras de navegación en mi sitio web, una en el encabezado y otra en el pie de página

La parte del encabezado funciona bien, pero lo que quiero es que el pie de página sea similar a la barra de navegación, pero cuando entro en la vista móvil (vista más pequeña) aparece un botón de alternar (función predeterminada de arranque), pero al hacer clic en ese conmutador, se desliza hacia abajo , y el contenido se muestra debajo de la barra de navegación, por favor, hacia arriba, entonces, ¿alguien puede ayudarme en esto?

No sé, cómo incluir Bootstrap en Fiddle, así que publicar directamente mi código de pie de página. incluye, archivos de arranque y archivos de Fontawesome en mi directamente.

TieneBootply enlazar: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>