How to make "navbar-fixed-bottom" slide up when button is clicked in responsive mode? (bootstrap)
css, html, javascript, twitter-bootstrap
Solution
Scroll to the bottom of the page using a show() event callback:
http://jsfiddle.net/Apx5N/2/
$(function() {
$('.collapse.show-footer').on('show', function () {
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
});
});
<div class="container">
...
<div class="nav-collapse show-footer collapse"> ... </div>
</div>
Problem
Currently Twitter Bootstrap's navbar at the bottom (used as footer) slides "down" when the button is pushed on a phone screen or narrow window. I want the menu to slide "up" instead of the default "down".. Any ideas on how I can do this with twitter bootstrap? the code used in the view layer of the navbar footer is as follows: ``` <footer id="footer" class="navbar navbar-fixed-bottom"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar dropup" data-toggle="collapse" data-target=".show-footer"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nav-collapse collapse show-footer"> <nav> <ul class="nav pull-right"> <%= g_about_link(yield(:title)) %> <%= g_contact_link(yield(:title)) %> <%= g_faq_link(yield(:title)) %> <%= g_careers_link(yield(:title)) %> <%= g_privacy_link(yield(:title)) %> <%= g_quotes_link(yield(:title)) %> <%= g_terms_link(yield(:title)) %> <li><a href="http://news.railstutorial.org/" target="_blank">News</a></li> </ul> </nav> </div><!--/.nav-collapse --> </div> </div> </footer> ```