navbar-fixed-top breaks when using responsive css #1570

Closed
ejain opened this Issue Feb 2, 2012 · 7 comments

Projects

None yet

6 participants

@ejain
Contributor
ejain commented Feb 2, 2012

When using navbar-fixed-top a padding-top has to be set on the body. But when using bootstrap responsive and reducing he width of the window, the navbar switches into a non-fixed vertical layout. Because the padding-top is still set, there is now a gap above the navbar...

This behavior can be seen e.g. in the example at http://twitter.github.com/bootstrap/examples/starter-template.html.

@JakeWharton

You can handle this yourself by setting the top padding conditionally when min-width is 980px.

@ejain
Contributor
ejain commented Feb 2, 2012

So starter-template.html should wrap the css body style like so:

  @media (min-width: 981px) {
    body {
      padding-top: 60px;
    }
  }
@ngan
ngan commented Feb 2, 2012

If you check out their example:

    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

They put the responsive after the body padding declaration.

@ejain
Contributor
ejain commented Feb 2, 2012

Moving the responsive down appears to work as well; created a pull request: #1576

@mdo
Member
mdo commented Feb 2, 2012

Closing this for @ejain's fix in #1576. Thanks all, sorry about that!

@mdo mdo closed this Feb 2, 2012
@vitorbari

What if I have a customized version generated using http://twitter.github.com/bootstrap/customize.html, which gives me just one file.
Where should I put the body padding declaration?

@andrewferk

@vitorbari if you are using a customized version do what @ejain mentioned in his first comment:

@media (min-width: 981px) {
  body {
    padding-top: 60px;
  }
}
@mdo mdo pushed a commit that referenced this issue Aug 15, 2013
@ejain ejain Import the responsive css *after* setting the body padding to fix the…
… issue described in #1570.
d66eb91
@alamofreeman alamofreeman added a commit to alamofreeman/bootstrap that referenced this issue Mar 5, 2014
@ejain @alamofreeman ejain + alamofreeman Import the responsive css *after* setting the body padding to fix the…
… issue described in #1570.
3641355
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment