Collapsible navs

Collapsible navs are a modification of the .nav element, transforming into a toggle-style navigation list on small screen sizes.

They are useful when you have too many navigation items to display in a horizontal list on small (mobile or tablet) screen sizes. Alternatives to this approach include having the font size decrease on smaller screen sizes, hide navigation items that are not required or allow visitors to scroll horizontally.


Use .collapsible-nav to have a .nav element collapse on smaller screen sizes.

A dropdown style can be applied on smaller screen sizes using utilities.