Change navbar height in Bootstrap3

Question

I'm trying to reduce the height of Bootstrap3's fixed navbar. I found the @navbar-height variable in variable. less, and changed it, but it doesn't seem to change anything. I also tries these solutions: "Change navbar height", "Navbar height changing". No result.

Any idea?

Thanks

Answer 1

update

As per response on https://github.com/twbs/bootstrap/issues/11443 @mdo wrote:

Change the @navbar-height and @navbar-padding-vertical and you should get it.

Example, set @navbar-height: 20px; and @navbar-padding-vertical: 0;, see: http://bootply.com/100604

Note this doesn't set the height of the .navbar-form elements

end update

The navbar itself has no defined width. Cause Bootstrap use the border-box model, the height is set by the highest element inside it.

Notice the navbar will have a min-height (set to 50px the default navbar height). @navbar-height in navbar.less sets this min-height.

also read it's comments:

// Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)

To change the height you will have to change the heights of the inside elements.

.navbar-brand

The .navbar-brand class got a height of 50px. Defined by a padding of 15px + a line-height of 20px;. (2 x 15 + 20 = 50).

The line-height is set in navbar.less too by @line-height-computed. With @line-height-computed defined in variables.less as floor(@font-size-base * @line-height-base); // ~20px

@line-height-computed will also used in forms, navigation, etc. so changing it and recompile Bootstrap will not only effect your navbar.

The above make it impossible to set your navbar height with Less.

The padding is defined by navbar-padding-vertical but this variables is NOT used for setting the padding of the navbar links (.navbar-nav > li > a)

Use css to manipulate the line-height (so font-size) and padding of .navbar-brand to change its height and so the height of the navbar.

.navbar-nav > li > a

The .navbar-nav > li > a class, the links in your navbar also defines a height of 50px (padding of 15 bottom/top) and a line-height of 20x again. Note the padding is first set to 10px hard code in navbar.less and overwritten by ((@navbar-height - @line-height-computed) / 2) (higher precedence) for @media (min-width: @grid-float-breakpoint)

Also in this case the line-height of the links will be set by @line-height-computed.

Other elements

Also element like forms, dropdown will have a calculated height.

Overall it seems you will have to use css for the different elements of your fixed navbar to sets it's height.

See also: https://github.com/twbs/bootstrap/issues/11443 and https://github.com/twbs/bootstrap/issues/11444

Answer 2

.navbar {
    padding: 0;
    transition: background 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s;
}
.navbar-brand {
    float: left;
    font-size: 18px;
    height: 10px;
    line-height: 2px;
    padding: 2px;
}

It should override scrolling-nav.css