"Nav-Pills with Drop-up"
Bootstrap 3.3.0 Snippet by cdenby

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Looking for a Footer of Nav-Pills with a Drop-up for "More"</h2> I've moved the Footer up a bit in this example to reduce the scrolling<br/> I want the More button to perform like a drop-up, but I'm unclear where to put the Drop-up class in this context </div> <footer class="footer"> <div class="container"> <p class="text-muted credit"> <ul class="nav nav-pills"> <li style="width:15% ;" class="active" onClick="ToggleActivePills(this);"><a href="#"><i class="glyphicon glyphicon-star"></i> Favourites</a></li> <li style="width:15% ;" ><a href="#" onClick="ToggleActivePills(this);"><i class="glyphicon glyphicon-picture"></i> Option 1</a></li> <li style="width:15% ;" ><a href="#" onClick="ToggleActivePills(this);"><i class="glyphicon glyphicon-plane"></i> Option 2</a></li> <li style="width:15% ;"><a href="#" onClick="ToggleActivePills(this);"><i class="glyphicon glyphicon-shopping-cart"></i> Option 3</a></li> <li style="width:15% ;" class="btn-group"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> More<i class="glyphicon glyphicon-arrow-up"></i> </a> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#" data-toggle-"dropdown">Do Something</a></li> <li><a href="#" data-toggle-"dropdown">Do Something Else</a></li> <li><a href="#" data-toggle-"dropdown">Do Something Again</a></li> </ul> </li> </ul> </p> </div> </footer> </div>
body, html , .container {height: 100%} .footer {bottom: 30px; box-sizing: border-box; display: block; position: fixed; float: none; z-index:2000; background-color: Black; width: 100%; height: 40px; text-align: center; margin: 0px 0px 0px 0px!important; padding: 0px 0px 0px 0px; font-size: x-small; }
function ToggleActivePills(li){ $(li).parent().find(".active").removeClass("active"); $(li).addClass("active"); console.log("did the switch!"); }

Related: See More

Questions / Comments: