Today I would like to share a few quick tips that you will find handy in case you need to change the Bootstrap navbar height.
Bootstrap 4 comes with an excellent set of utility classes, mostly built for quickly setting spacing, color, or background directly in the HTML code, without the need to touch CSS. To quickly change spacing inside your navbar, add a padding class to your <nav class="navbar"></nav>
.
py-3
class to itpy-5
class to your navbarpy-0
class to your navbarpy-3 py-lg-5
classes will make your navbar narrower on mobile devices and larger on laptops and desktopsIf you need to have your navbar height set to a precise number, you can, e.g., create a custom CSS class - <nav class="navbar navbar-custom"></nav>
and set your desired height in it. As the navbar is made with flexbox, everything should align just fine.
.navbar-custom {
height: 100px;
}
If you work with SCSS Bootstrap sources in your project, you can set your desired navbar vertical padding in your own variables.scss file (recommended), or directly in bootstrap/_variables.scss.
$navbar-padding-y: 20px;
There are more methods, but I would like to tell you about these two:
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 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:
.navbar
, .navbar-brand
.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. .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.
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 :)