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

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

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

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

This comment has been minimized.

Show comment
Hide comment
@JakeWharton

JakeWharton Feb 2, 2012

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

JakeWharton commented Feb 2, 2012

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

@ejain

This comment has been minimized.

Show comment
Hide comment
@ejain

ejain Feb 2, 2012

Contributor

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

  @media (min-width: 981px) {
    body {
      padding-top: 60px;
    }
  }
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

This comment has been minimized.

Show comment
Hide comment
@ngan

ngan 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.

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

This comment has been minimized.

Show comment
Hide comment
@ejain

ejain Feb 2, 2012

Contributor

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

Contributor

ejain commented Feb 2, 2012

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Feb 2, 2012

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@vitorbari

vitorbari Feb 14, 2013

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?

vitorbari commented Feb 14, 2013

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

This comment has been minimized.

Show comment
Hide comment
@andrewferk

andrewferk Mar 3, 2013

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

@media (min-width: 981px) {
  body {
    padding-top: 60px;
  }
}

andrewferk commented Mar 3, 2013

@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 pushed a commit that referenced this issue Aug 15, 2013

alamofreeman added a commit to alamofreeman/bootstrap that referenced this issue Mar 5, 2014

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