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

Question

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, w

Answer 1

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

Answer 2

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

Answer 3

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