How to change navbar size in Twitter Bootstrap 3

Question

I am trying to increase bootstrap 3.0 navbar height which is used with fixed top behavior.

How can I do it?

Answer 1

If you are using the .less or .scss version, you can edit the following $navbar-height variable in code:

https://github.com/twbs/bootstrap/blob/master/less/variables.less#L360

If not, you need to override it with a rule by statiing:

.navbar {
    height: {new height};
}

Answer 2

Without seeing your code it is hard to help but in Bootstrap 3 typically,

This is the less variable @navber-height and @navbar-padding-vertical will adjust the height of the navbar.

But in my current Bootstrap app I have it set up different using

header.navbar {
    height: 54px;
}

The easiest thing to do would be to inspect element on the navigation bar then look at the css to see where the height value is. Adjust it to the desired height.

Then create a rule in your css with !important to override the existing Bootstrap css.

This is another example without less.

.navbar-fixed-top {
    height: 70px !important; /* Whatever you want. */
}

Create new css file and put your overrides in it.

<link rel='stylesheet' href='/stylesheets/bootstrap.css'/>
<link rel='stylesheet' href='/stylesheets/overrides.css'/>

inside overrides.css

If this css rule exists inside Bootstrap when you inspect element then override it in the overrides css file you have added now.

remember use !important

.navbar-fixed-top {
    height: 70px !important; /* Whatever you want. */
}