How to customize the height of bootstrap navbar?

Question

I want to change the height of Twitter Bootstrap Navbar to 24px height. I have tried the code in Bootply, and there the height is changing, but when I try it in my project the minimum height is 40px;

I need this navbar on 24px height: I found the other topic HERE, with this answer, but did not worked for me:

.navbar-brand,
.navbar-nav li a {
    line-height: 150px;
    height: 150px;
    padding-top: 0;
}

Please see the code here, and tell me what am I doing wrong?

CODE HERE

the issue was setting additional `min-height: 0px;` along with the other — Valerxx22, Apr 11 '14 at 13:32

score 1 · Accepted Answer · answered Apr 11 '14 at 11:13

1

You must have defined somewhere else in your CSS min-height:40px; for the navbar. Find it and erase it or you can just override it by including min-height:0px; in the CSS for your navbar.

Try:

.navbar-inner {
background: none;
filter: none;
border: none;
font-family: 'Calibri';
text-transform: uppercase;
background-color: #000;
height: 24px !important;
min-height: 0px; //ADD THIS
}

answered Apr 11 '14 at 11:13

laaposto

11,835
15
54
71

That worked out great for me! thx! – Valerxx22 Apr 11 '14 at 13:16

score 1 · Answer 2 · answered Apr 11 '14 at 11:14

1

Change this

.navbar-inner {
background: none;
filter: none;
border: none;
font-family: 'Calibri';
text-transform: uppercase;
background-color: #000;
height: 24px !important; /* here */
}

answered Apr 11 '14 at 11:14

Paulie_D

107,962
13
142
161

How to customize the height of bootstrap navbar?

2 Answers2