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 mob

Solution 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

Solution 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

Solution 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