Menu
I am trying to decrease bootstrap 3.0 navbar height which is used with fixed top behavior. Here i am using code.
HTML
<div class="tnav"> <div class="navbar navbar-fixed-top" role="banner"> <div class="navbar-inner-sm"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav pull-right"> <li class="active"> <a href="../getting-started">Getting started</a> </li> <li> <a href="../css">Ext01</a> </li> <li> <a href="../components">Language</a> </li> <li> <a href="../javascript">My Account</a> </li> <li> <a href="../customize">Sign Out</a> </li> </ul> </nav> </div> </div> </div> CSS
.tnav .navbar { background:#F06; height:30px; } .navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);} .navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;} .navbar-inner-sm .nav.pull-right {float: right;} .navbar-inner-sm .nav > li {display: block;float: left;} .navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);} .navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;} .navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;} .navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;} .navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;} Result
From screen it shows, nav bar decreased in output but height doesn't decreased. original height is shown in pink color.
Above css script almost work well in bootstrap 2.*
Is there any way to decrease height properly.
934
To reduce height you need to remove padding on both. This class sets padding-top and padding-bottom to 0. Next set the padding-top and padding-bottom of navbar class to 0. Thats it!
To decrease navbar height: add py-0 class to your navbar. Tip: you can combine more classes for individual viewports: e.g., py-3 py-lg-5 classes will make your navbar narrower on mobile devices and larger on laptops and desktops.
The Bootstrap 4 Navbar doesn't have a set height, so it's rendered height (~54 px) is controlled by the size of the Navbar's content (brand, links, text, padding, etc..).
In order to increase the height of the navbar , you have to increase the size of the children > li > a . Keep in mind that the children already have vertical padding of 15px.
After spending few hours, adding the following css class fixed my issue.
Work with Bootstrap 3.0.*
.tnav .navbar .container { height: 28px; } Work with Bootstrap 3.3.4
.navbar-nav > li > a, .navbar-brand { padding-top:4px !important; padding-bottom:0 !important; height: 28px; } .navbar {min-height:28px !important;} Update Complete code to customize and decrease height of navbar with screenshot.
CSS:
/* navbar */ .navbar-primary .navbar { background:#9f58b5; border-bottom:none; } .navbar-primary .navbar .nav > li > a {color: #501762;} .navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;} .navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;} .navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;} .navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {} .navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;} .navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;} .navbar-primary .navbar .navbar-brand {color:#fff;} .navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;} .navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; } .navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; } .navbar-xs .navbar-primary .navbar .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; } .navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; } .navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; } .navbar-sm .navbar-primary .navbar .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 40px; } Usage Code:
<div class="navbar-xs"> <div class="navbar-primary"> <nav class="navbar navbar-static-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With