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.

Sign up for GitHub

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

Jump to bottom

Can you add to the example list sticky footer with top-fixed navbar? #5749

Closed
sobit opened this issue Nov 2, 2012 · 9 comments
Closed

Can you add to the example list sticky footer with top-fixed navbar? #5749

sobit opened this issue Nov 2, 2012 · 9 comments

Comments

@sobit
Copy link

sobit commented Nov 2, 2012

Having trouble with that.
@mdo
Copy link
Member

mdo commented Nov 2, 2012

We won't be changing the example—just place the fixed navbar code within the wrapper, or anywhere else, and you should be fine. It's position is fixed, so it won't affect the sticky footer at all as it's not on the same plane.

@mdo mdo closed this as completed Nov 2, 2012
@apcode
Copy link

apcode commented Dec 1, 2012

This doesn't work for me. So +1 for an example with fixed top navbar.
When you add a navbar navbar-fixed-top, the footer moves below the fold and a scrollbar is added.

@Eventect
Copy link

+1, doesn't work for me either

@mdo
Copy link
Member

mdo commented Dec 22, 2012

As the example indicates in the code, place the navbar within the div#wrap and you'll be fine.

@abardal
Copy link

abardal commented Jan 10, 2013

+1, tried wrapping the nav, wound up adding a bottom padding to the body. I would very much appreciate a more elegant solution to this!

@mdo
Copy link
Member

mdo commented Jan 10, 2013

Despite not wanting to add this myself, I have done so to avoid further confusion. The sticky footer with fixed navbar example has been added in #6346. It's quite straightforward as I indicated earlier:

  • Add the fixed navbar within #wrap.
  • Instead of adding padding-top: 60px; to the to <body>, add it to a child element, like #wrap > .container as I have done in the new example.

And bingo, it works.

@Eventect
Copy link

Ta mdo.

@sobit
Copy link
Author

sobit commented Jan 11, 2013

Thanks @mdo, you're the best! :)

@erquhart
Copy link

@mdo in the interest of avoiding further confusion on this, I'll add that some of the inline css commented as unecessary for the template is actually required for sticky footer/nav, specifically the #wrap > .container selector. Without it we're back to square one. Of course I could be wrong, but I had to add it when I tried your new example.

Another two cent, as adding this example seemed a bit of an annoyance for you, and understandably so, keep in mind that many programmers just don't know css beyond the basics, and bootstrap allows us to do what we do without having to master something else. This solution just wasn't that simple for some of us. Thanks again :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@mdo @Eventect @sobit @apcode @erquhart @abardal