How do you decrease navbar height in Bootstrap 3?

bootstrap 4 navbar height decrease
bootstrap 4 navbar height increase
standard navbar height
navbar height css
react-bootstrap navbar height
bootstrap 4 navbar-collapse full height
bootstrap navbar width
full height navbar

I want to make my navbar in BS3 to be of height 20px. How do I do this?

I've tried the following:

.tnav .navbar .container { height: 28px; }

Did nothing.

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

Appears to be able to increase the size of the bar, but cannot decrease.

What is a good way to do this while preserving the container's alignment, etc.

bootstrap had 15px top padding and 15px bottom padding on .navbar-nav > li > a so you need to decrease it by overriding it in your css file and .navbar has min-height:50px; decrease it as much you want.

for example

.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}

add these classes to your css and then check.

How to change Bootstrap navbar height, Change navbar height by overriding Bootstrap CSS definitions. If you are So let's say, you want to change navbar height to 80px. All you Included are 3 HTML page templates - Homepage, Category page and Blog post. 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.

Minder Saini's example above almost works, but the .navbar-brand needs to be reduced as well.

A working example (using it on my own site) with Bootstrap 3.3.4:

.navbar-nav > li > a, .navbar-brand {
    padding-top:5px !important; padding-bottom:0 !important;
    height: 30px;
}
.navbar {min-height:30px !important;}

Edit for Mobile... To make this example work on mobile as well, you have to change the styling of the navbar toggle like so

.navbar-toggle {
     padding: 0 0;
     margin-top: 7px;
     margin-bottom: 0;
}

[Solved] Bootstrap 3, How do I reduce the height of my navigation bar? All I want to do in Bootstrap 3 is reduce the Navbar height. I want to do this directly in bootstrap.css (not using LESS). What bits of css do i need to change? Note, it is a fixed Navbar at the top of the screen. Thanks in advance.

Instead of <nav class="navbar ... use <nav class="navbar navbar-xs...

and add these 3 line of css

.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }

Output :

Bootstrap navbar height - bootstrap helpers, How do I change the height of the bootstrap navigation bar? How do you decrease navbar height in Bootstrap 3? on April 13, 2016

Change Bootstrap Navbar height, All I want to do in Bootstrap 3 is reduce the Navbar height. I want to do this directly in bootstrap.css (not using LESS). What bits of css do i need  decrease Bootstrap 3.3 Navbar height. GitHub Gist: instantly share code, notes, and snippets.

The answer above worked fine (MVC5 + Bootstrap 3.0), but the height returned to the default once the navbar button showed up (very small screen). Had to add the below in my .css to fix that as well.

.navbar-header .navbar-toggle {
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}

How do I modify navbar height? - HTML & CSS, 3. <p class="font-weight-bold">To change the height of the Navbar use CSS. See the examples of target="_blank">Bootstrap Navbar Docs</a> .</p>. 7. ​. 8. there are various examples given for bootstrap 3 here How do you decrease navbar height in Bootstrap 3? but none of them seem to work for bootstrap 4, can anyone help with this one? css3 bootstrap-4 twitter-bootstrap-4

Navbar · Bootstrap, -https://bootstrapious.com/p/how-to-change-bootstrap-navbar-height. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner 2. <nav class="navbar navbar-default">. 3. <div class="container-fluid"​>. 4 <button type="button" class="navbar-toggle collapsed" data-toggle="​collapse"  there are various examples given for bootstrap 3 here How do you decrease navbar height in Bootstrap 3? but none of them seem to work for bootstrap 4, can anyone help with this one? css bootstrap-4 twitter-bootstrap-4

How do you decrease navbar height in Bootstrap 3? - css - html, I've tried adjusting the height everywhere I could and nothing is working. Looking data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</​span> <span ethanforbes89 November 8, 2017, 6:32pm #3. thsman Any screen width over 800 gets the short version and below that the standard version. This is really where CSS Media Queries excel, however things can get a bit tricky if you are already using Bootstrap (as you don't want to run into conflicts with Bootstraps existing media queries).

How to Decrease the Height of Navbar on Bootstrap 4 – Web , Navbars are responsive by default, but you can easily modify them to change that​. name. .navbar-nav for a full-height and lightweight navigation (including support for And because we use classes for our navs, you can avoid the list-​based  Re: How to change navbar height in Bootstrap 3? Hi Shawn, To change the height of navbar, you have to change the padding (top and bottom) of .navbar>ul>li>a, and also change the min-height to the size you choose.

Comments
  • I was searching a lot on SO and Google, but this solution did it! Thank you!
  • With the standard 3.0 navbar, that simply does-not-work. At all.
  • When using navbar-brand inside the navbar, its padding also has to be adjusted same as .navbar-nav > li > a
  • This works, with a couple caveats. The navbar-brand needs to be reduced too. My working example is: .navbar-nav > li > a, .navbar-brand {padding-top:5px !important; padding-bottom:0 !important; height: 30px; } .navbar {min-height:30px !important;}
  • This only affects the links in the navbar, not the navbar itself.
  • This was going to be my next SO search. Thanks
  • i wish i could vote some more upvotes, people are just messing up with style on other similar questions but finally this one worked
  • Its not responsive.
  • in my case just changing min-height in .navbar and font in .nav-link fixed it in bootstrap 4
  • It would be helpful to the readers if you could add brief explanation of what these CSS styles do. :)
  • What exact files are you referring here to look for navbar-height?
  • If you're using LESS, the file is variable.less. It is located at Bootstrap's LESS folder.