Auf meiner Website befinden sich zwei Navigationsleisten, eine in der Kopfzeile und eine in der Fußzeile

Der Kopfbereich funktioniert einwandfrei, aber ich möchte, dass die Fußzeile der Navigationsleiste ähnelt. Wenn ich jedoch in die mobile Ansicht (kleineres Ansichtsfenster) gehe, erscheint eine Umschalttaste (Standard-Bootstrap-Funktion). Wenn Sie jedoch auf diese Umschalttaste klicken, wird sie nach unten verschoben , und der Inhalt wird unterhalb der Navigationsleiste angezeigt. Kann mir jemand dabei helfen?

Ich weiß nicht, wie ich Bootstrap in Fiddle einbinden soll, also poste ich meinen Footer-Code direkt. Es enthält Bootstrap-Dateien und Fontawesome-Dateien in meinem direkt.

BekamBootply Verknüpfung: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>