0

I'm currently using the gae boilerplate for my application. I want to change the size of the navbar component but I don't find the attribute to do it. I have already searched the responses from others subjects but I don't find the attribute to change the height in the css or less bootstrap files.

Is there anyone who has already used the gae boilerplate and can give me an answer ?

Thank you

Tim Hoffman
  • 12,976
  • 1
  • 17
  • 29
user2394387
  • 3
  • 1
  • 1
  • 2

3 Answers3

0

For twitter bootstrap, set the height or min-height property of the .navbar-inner class.

For example:

.navbar-inner {
    height: 80px;  
}

FIDDLE

JAM
  • 6,045
  • 1
  • 32
  • 48
  • If I do that the collapse function for bootstrap responsive stops working properly. – Martin Nov 11 '13 at 08:35
  • Yeah, I guess you would have to account for that on a lower breakpoint. – JAM Nov 11 '13 at 21:44
  • could you update your fiddle with corrected CSS import? – dbrin Oct 28 '14 at 16:46
  • @dbrin Updated. It is probably outdated now, though. – JAM Oct 28 '14 at 17:33
  • cool, thanks! its almost right, the collapse button is not showing, but the height is shrunk. By the way if you have form elements in the navbar this wont be enough to shrink them. – dbrin Oct 28 '14 at 18:37
0

I found that I needed to change the padding on the navbar class and the nav class for lists:

.navbar .brand,
.navbar .nav > li > a {
    padding: 0 30px 0 30px;
}
Kelley Kavanaugh
  • 741
  • 5
  • 2
0

The accepted answer only worked partially for me on Bootstrap 2.12. This worked better for me (where .widget is the class of the items I want to have smaller navbars on):

.navbar .brand,
.navbar .nav > li > a {
    padding: 8px 10px 0px 10px;
}
.navbar-inner{
    min-height:16px;
}
.navbar .navbar-inner .brand {
    margin-top: 0px;
}
.widget .navbar .navbar-inner .nav .dropdown a {
    margin-top: 0px;
}
.widget .navbar .navbar-inner a.btn {
    margin-top: 2px;
}
JayCrossler
  • 2,079
  • 2
  • 22
  • 22