Grails Twitter Bootstrap Plugin Issue with navbar-fixed-top
- by Philip Tenn
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!
