Create a Fixed-to-bottom navbar in bootstrap that slides content upwards when toggled

问题

I am having two navbars on my website, one in header and other in Footer

Header part working fine, but what i want is that footer should be similar to navbar, but, when i go in mobile view (smaller viewport) there comes a toggle button (default bootstrap feature) but when click on that toggle, it slides downwards, and the content is displayed below the navbar, inspite upwards, so, can anyone help me in this?

I don't know, how to include Bootstrap in Fiddle, so directly posting my footer code. it includes, bootstrap files and Fontawesome files in my directly.

Got Bootply link: 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>

回答1:

I was able to get this to work by simply changing the order. Instead of putting your navbar-header before your collapse items, put it after. That way you aren't relying on positioning and don't get a flash/jump while the header bar and expand button move to the bottom.

Here's a demo: http://www.bootply.com/117444

All I did was move the collapse items div in front of the "header" div with the button

回答2:

If I understand your question, you want the toggle menu to display above instead of under the toggle button. To do that you'd need to absolute position the collaspe menu..

footer .navbar-collapse.in {
    bottom: 70px;
    position: absolute;
    background-color:#333;
    width:100%;
}

Bootply Demo: http://bootply.com/103653

回答3:

Fix Skelly solution.

Add one more CSS:

@media screen and (max-width: 768px) {
  footer .navbar-collapse {
    position: absolute;
    bottom: 70px;
    width: 100%;
    background-color: #303030;
  }
}

http://www.bootply.com/4b6cSUMTzg

来源：https://stackoverflow.com/questions/20905185/create-a-fixed-to-bottom-navbar-in-bootstrap-that-slides-content-upwards-when-to

标签

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3

navbar