#### Navbars - Sizing

Statistics Invoices Schedule

##### Large navbar size

Increase height of the navbar by adding `.navbar-lg` class to the main navbar container. Large navbar height is `48px`, all navbar components will be adjusted to the large navbar height automatically. If navbar type is `fixed`, add `.navbar-top-lg` to the `<body>` tag to set top padding and/or `.navbar-bottom-lg` class if navbar position is bottom to set bottom padding.

Navbar preview

Markup example

    <!-- Large navbar -->
    <div class="navbar navbar-inverse navbar-lg">
    	<div class="navbar-header">...</div>
    	<ul class="nav navbar-nav">...</ul>
    	<ul class="nav navbar-nav navbar-right">...</ul>
    </div>
    <!-- /large navbar -->

##### Default navbar size

Default navbar doesn't require any additional classes in main navbar container. Default navbar height is `46px`, all navbar components will be adjusted to the default navbar height automatically. If navbar type is `fixed`, add `.navbar-top` to the `<body>` tag to set top padding and/or `.navbar-bottom` class if navbar position is bottom to set bottom padding.

Navbar preview

Markup example

    <!-- Default navbar -->
    <div class="navbar navbar-inverse">
    	<div class="navbar-header">...</div>
    	<ul class="nav navbar-nav">...</ul>
    	<ul class="nav navbar-nav navbar-right">...</ul>
    </div>
    <!-- /default navbar -->

##### Small navbar size

Decrease height of the navbar by adding `.navbar-sm` class to the main navbar container. Small navbar height is `44px`, all navbar components will be adjusted to the small navbar height automatically. If navbar type is `fixed`, add `.navbar-top-sm` to the `<body>` tag to set top padding and/or `.navbar-botom-sm` classes if navbar position is bottom to set bottom padding.

Navbar preview

Markup example

    <!-- Small navbar -->
    <div class="navbar navbar-inverse navbar-sm">
    	<div class="navbar-header">...</div>
    	<ul class="nav navbar-nav">...</ul>
    	<ul class="nav navbar-nav navbar-right">...</ul>
    </div>
    <!-- /small navbar -->

##### Mini navbar size

Set the smallest navbar height of `42px` by adding `.navbar-xs` class to the main navbar container, all navbar components will be adjusted to the mini navbar height automatically. If navbar type is `fixed`, add `.navbar-top-xs` to the `<body>` tag to set top padding and/or `.navbar-bottom-xs` class if navbar position is bottom to set bottom padding.

Navbar preview

Markup example

    <!-- Mini navbar -->
    <div class="navbar navbar-inverse navbar-xs">
    	<div class="navbar-header">...</div>
    	<ul class="nav navbar-nav">...</ul>
    	<ul class="nav navbar-nav navbar-right">...</ul>
    </div>
    <!-- /mini navbar -->

##### Mixing navbar sizes

Multiple navbars support different heights as well, just add optional height classes to both navbars. If navbar type is `fixed`, add `.navbar-top-*-*` to the `<body>` tag to set top padding and/or `.navbar-bottom-*-*` class if navbar position is bottom to set bottom padding. Example: add `.navbar-top-sm-xs` class to `<body>` if first navbar is small and second is mini.

Navbar preview

Markup example

    <!-- Large navbar -->
    <div class="navbar navbar-inverse navbar-lg">
    	<div class="navbar-header">...</div>
    	<ul class="nav navbar-nav">...</ul>
    	<ul class="nav navbar-nav navbar-right">...</ul>
    </div>
    <!-- /large navbar -->

    <!-- Mini navbar -->
    <div class="navbar navbar-default navbar-xs">
    	<div class="navbar-header">...</div>
    	<ul class="nav navbar-nav">...</ul>
    	<ul class="nav navbar-nav navbar-right">...</ul>
    </div>
    <!-- /mini navbar -->