Search code examples
grailstwitter-bootstrapgrails-plugingsp

Grails Twitter Bootstrap Plugin Issue with navbar-fixed-top

I am using Grails 2.1.0 and Twitter Bootstrap Plugin 2.1.1 and am encountering an issue with navbar-fixed-top.

In order to get the Navbar fixed to the top of the page to behave correctly during resize, the Twitter Bootstrap Docs states:

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

How can I do this when using the Grails Plugin for Twitter Bootstrap?

Here is what I have tried:

main.gsp

<head>
  ...
  <r:require modules="bootstrap-css"/>
  <style type="text/css">
    body {
      padding-top: 60px;
      padding-bottom: 40px;
    }
    .sidebar-nav {
      padding: 9px 0;
    }
  </style>
  <r:require modules="bootstrap-responsive-css"/>
  <r:layoutResources/>
</head>

The problem is that Grails Plugin for Twitter Bootstrap takes the content of bootstrap.css and bootstrap-responsive.css and combines them into the following merged file: static/bundle-bundle_bootstrap_head.css.

Thus, I am not able to put the body padding style "after core Bootstrap CSS and before Responsive CSS" as per Twitter Bootstrap docs.

Here is the View Source HTML that I get from the main.gsp above

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .sidebar-nav {
    padding: 9px 0;
  }
</style>

<link href="/homes/static/bundle-bundle_bootstrap_head.css" type="text/css" 
    rel="stylesheet" media="screen, projection" />

If there is no way to do this, I could always just drop the Grails Twitter Bootstrap Plugin and manually download Twitter Bootstrap and put it my Grails Project's web-app/css, web-app/images, and web-app/js. However, I would like to be able to use the Grails Twitter Bootstrap Plugin.

Thank you very much in advance, I appreciate it!

Solution

  • Bootstrap recommends that place for the style because when the screen width goes below 980px navbar becomes static (not fixed). So calling bootstrap-responsive.css after the padding prevents from a blank space at the top in mobile devices (there's not fxed element to fill that padding).

    You can reproduce this behaviour using a media query:

    @media (min-width:980px) {
    body {
        padding-top: 40px;
    }
}

    Put this CSS anywhere in your stylesheets, and don't worry about your <links>