How to change Bootstrap navbar height

Today I would like to share a quick tip with you that you will find handy in case you need to change Bootstrap navbar height.

There are more methods but I would like to tell you about these two:

Overriding Bootstrap CSS definitions

If you are working with CSS files then this is my preferred method. You won't be editing Boostrap CSS files neither the Bootstrap theme's CSS but override the setting in your own file. In our themes we provide custom.css file for changes like this one.

Big advantage of this approach is that when new version of Boostrap or of your theme is realeased, you just overwrite the files on your website but your modifications stay untouched.

So let's say, you want to change navbar height to 80px. All you need to do is to place these two lines into your custom.css file.

.navbar {min-height: 80px;}
.navbar-brand {padding: 0 15px; height: 80px; line-height: 80px;}

Editing Bootstrap LESS files

If you are working with Bootstrap LESS files, locate the file variables.less and find a line with similar content:

@navbar-height: 50px;

Now change the original value to the desired value and compile the LESS files to CSS.

One of these two approaches should be enough to have your Bootsrap CSS modified and change your navbar height. If you liked the article, let us know :)

You might also like one of our Free Themes

Listings - Bootstrap Directory Theme

Listings - Bootstrap Directory Theme

Listings is a Bootstrap 4 Directory theme to list startups in your industry, local businesses…

Cathedral - Bootstrap Church & Charity Theme

Cathedral - Bootstrap Church & Charity Theme

Cathedral is a flexible Bootstrap 4 Church or Charity theme. Included A great home page…

Boutique - Bootstrap E-commerce Theme

Boutique - Bootstrap E-commerce Theme

Bootique is a flexible Bootstrap 4 E-commerce theme with a focus on clear design language, and…