Navbar

Global variables

$nav-bar-class: "-navbar" !global
$nav-bar-height: 50px !global
$nav-bar-padding-horizontal: $base-padding-horizontal !global
$nav-bar-border-width: 1px !global
$nav-bar-style: solid !global
$nav-bar-border-radius: 3px !global

// It's only fo _top_ or _bottom_ navbars. Need to be over dropdowns.
$nav-bar-z-index: $dropdown-z-index + 1

$nav-bar-toggle-class: #{$nav-bar-class}-toggle

Basic use

Use navbar class -navbar.



Grid and navbar

Add the grid inside the -navbar to allign elements. Add -header to the -navbar.

Change themes

If you apply a theme to the -navbar, theme of every element inside will change.

Change size

Apply size to the -navbar to change sizes of the elements inside.



...
...
...

Fixed navbar

Use modifiers _top_ and _bottom_ to stick navbar to top or bottom.

Do not forget to set padding to the navbar container. Padding should be equal or more then -navbar height.

Responsive navbar

First of all read about responsive utilities. After you understand responsiveness, it will be easier to understand how to create responsive navbar.

There is no magic, but it's very simple! Trust me! Look at the comments in the code. With those classes you can hide menu even for not large desktops or just for phones. It's very flexible technique.
Header here
Header here
>