$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
Use navbar class -navbar
.
Add the grid inside the -navbar
to allign elements. Add -header
to the -navbar
.
If you apply a theme to the -navbar
, theme of every element inside will change.
Apply size to the -navbar
to change sizes of the elements inside.
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.
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.
>