Navbars - Sizing

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.

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.

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.

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.

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.