У меня есть два navbar на моем сайте, один в шапке и другой в нижнем колонтитуле

Часть заголовка работает нормально, но я хочу, чтобы нижний колонтитул был похож на панель навигации, но, когда я перехожу в мобильное представление (меньший видовой экран), появляется кнопка переключения (функция начальной загрузки по умолчанию), но при нажатии на этот переключатель он скользит вниз и содержимое отображается под панелью навигации, а не вверх, так что, кто-нибудь может мне помочь в этом?

Я не знаю, как включить Bootstrap в Fiddle, поэтому непосредственно публикую свой код нижнего колонтитула. это включает, файлы начальной загрузки и файлы Fontawesome в моем непосредственно.

ПолучилBootply ссылка: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>