Get access to an awe-inspiring collection Of 87 Beautiful Wordpress themes for the price of one Get it now Ad

How to change Bootstrap navbar height

Published: 7.1.2016 | Last update: 14.3.2017

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:

1. Change navbar height by overriding Bootstrap CSS definitions

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

A big advantage of this approach is that when a new version of Bootstrap or of your theme is released, 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 few lines into your custom.css file. 

Let me explain shortly:

  • You have to define height or min-height for few elements: .navbar, .navbar-brand
  • Change margin-top for the .navbar-toggle button that appears in the collapsed navbar. This needs to be calculated but it should be easy to do. A formula is in the code.
  • Change padding-top and padding-bottom and define line-height for uncollapsed navbar links. Values for padding again need to be calculated as you can see in the code below.
 .navbar {
  min-height: 80px;
}

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

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

Have a look at the result and experiment a bit yourself in this Codepen.

Change navbar height by 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 Bootstrap CSS modified and change your navbar height. If you liked the article, let us know :)

Check out a nice collection of Joomla templates at Template Monster. 

Hi, I'm Ondrej, creator of Bootstrapious. I have published Bootstrap tutorials and freebies here since 2015.

Would you like to choose a topic for a next tutorial or a type of the next freebie? Do you need a consultation or would you like to get an exposure on the Bootstrapious website?

Become one of Bootstrapious' patrons on Patreon and get one of the many great rewards I offer there.

Thanks for stopping by and have a great day ;)

Ondrej, Bootstrapious

You might also like one of our Free Themes

Universal - Business & E-commerce Template

Universal is clean and stylish universal website template built with Bootstrap 3.3. It stands out…

View theme

Italiano - Restaurant or Café Template

Italiano is my free Bootstrap HTML responsive template. You can use it to build an elegant website…

View theme

Foliou - Bootstrap Portfolio
PREMIUM

Foliou - Bootstrap Portfolio

Foliou is a responsive one-page Bootstrap portfolio template. It presents your work in a clean…

View theme

Comments

Comments automatically close after 120 days.

Although I would like to help everyone getting their websites running, I simply can't as my time is really limited.

If you need a consultation or support, I provide a dedicated consulting to Bootstrapious Patrons - just choose a Dedicated support reward on my Patreon page and get in touch. Thank you for understanding and supporting Bootstrapious.

Share on Facebook Share on G+ Share on Twitter Share on LinkedIn