Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sticky footer with fixed navbar example #9680

Closed
MrMack opened this issue Aug 16, 2013 · 3 comments
Closed

Sticky footer with fixed navbar example #9680

MrMack opened this issue Aug 16, 2013 · 3 comments

Comments

@MrMack
Copy link

MrMack commented Aug 16, 2013

Seems this css part can be left out (BS2 leftover ?)

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}

@lipis
Copy link
Contributor

lipis commented Aug 16, 2013

Actually yes.. it could be deleted and replaced with this in both sticky footer examples... because otherwise for small screens there is a horizontal scroll bar..!

#footer > .container {
  padding-left: 15px;
  padding-right: 15px;
}

And 15px because it's the half of the gutter width :)

here are the fixed examples in action:
https://dl.dropboxusercontent.com/u/15234/bootstrap/examples/sticky-footer/index.html
https://dl.dropboxusercontent.com/u/15234/bootstrap/examples/sticky-footer-navbar/index.html

@MrMack
Copy link
Author

MrMack commented Aug 16, 2013

And an additional padding-bottom on the #wrap can help make some space between content and footer onscroll e.g.

#wrap {
  padding: 0 0 90px; /* footer height + 30px breathing room */
}

@lipis
Copy link
Contributor

lipis commented Aug 16, 2013

breathing room is up to the end user.. the important thing to know is that it has to be at least as the height of the footer..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants