Problem with css in 7.0

Paul · August 1, 2014, 9:59pm

I installed 7.0, but there is a problem with the navbar css. The problem is that the navbar-brand has a height of 50px. So all the links to the other pages have the correct padding and align correctly, but the .navbar-brand is 30 px taller. It gives the whole navbar a height of 80px. I didn’t change anything in the Roots css at all. All I did was install it. I downloaded the zip, extracted, renamed it, used chmod and chown to set ownership, group and permissions, ran npm install and grunt build. I activated theme and used default settings on activation page. I have no idea how that 50 pixel height got in their.

I thought I should report this problem here because it seems that unless the files somehow got corrupted while the zip was downloading, then their could be a bug in the roots download.zip. Specifically I mean that height: 50px string could be in one of the less files where it doesn’t belong which seems really odd. I installed Roots 6.5.2 and it says the .navbar-brand height is 20px. When I change the height to 20px in 7.0 it looks normal.

I don’t want to install again, especially since unless some freak accident happened, then the problem is in the download zip on git hub. So I would like to know is which less file that 50px height is being generated from. I’m no ace with less, but I did look in media.less, mixins.less, navbar.less and navs.less. It may have been in one of those files and I missed it. If someone can tell me where the value for the .navbar-brand { height property is being stored, it will clear up a lot of confusion for me about the architecture of this less system.

Also, I used to think that the bootstrap customization page would give me less files when I made customizations, but it didn’t. I guess I have to go into the less files to make any changes to the less. So it seems that you can’t really use the bootstrap customizer when you are using roots. Is it correct there is no customizer too which will generate customized less files?

cfx · August 1, 2014, 10:58pm

github.com

twbs/bootstrap/blob/master/less/navbar.less#L169






// Brand/project name


.navbar-brand {
float: left;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
line-height: @line-height-computed;
height: @navbar-height;


&:hover,
&:focus {
  text-decoration: none;
}


> img {
  display: block;
}


@media (min-width: @grid-float-breakpoint) {

github.com

twbs/bootstrap/blob/master/less/variables.less#L339


//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);




//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.


// Small screen / tablet
@container-tablet:             (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm:                 @container-tablet;


// Medium screen / desktop
@container-desktop:            (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md:                 @container-desktop;


// Large screen / wide desktop

Afaik the Bootstrap “customizer” does not generate LESS files—it takes your customization params and spits out compiled CSS.

Paul · August 2, 2014, 12:00am

It’s really odd. I changed the background color for the .navbar-default in main.less and ran grunt less. After running grunt less, the navbar height looks normal. This was actually the 3rd time I installed roots, after two failures with npm errors. I only ran grunt build on this 3rd install. Maybe I had to run grunt less to make sure it compiled correctly or there’s some kind of bug specific computer setup (bodhi linux). Next time I’ll be sure and run grunt less if I see any css problems after running grunt build.

Obviously looking at the navbar.less reveals that the 50px height is correct. I don’t know why I had a hard time finding that stuff in my code editor, but thanks for pointing those lines on tb git hub. That made everything click. Thanks so much.

cfx · August 2, 2014, 4:07am

Sure thing. When in doubt, setup your sourceMap correctly and Chrome Dev Tools (not sure about other debuggers) will show you the less file your rule originates from.