Timber provides a solid structure for creating CSS3 driven menus with support for simple and complex sub-menus. Menu items are by default floated left but can easily be centered or right aligned by applying the classes .nav-center and .nav-right to the navigation wrapper.
Note: We can add sub menu indication arrows by adding the class .sub-menu-indicator to the navigation wrapper and .contains-sub-menu or .contains-mega-sub-menu to the parent li tags.
Timber provides a simple system for handling desktop and mobile navigation. By default the main navigations is shown on desktop. On mobile only the hamburger menu link is shown. Below is an example of how to structure a main site navigation.
We can a launch an auxiliary navigation (side or overlay navigation) using a hamburger menu link called .navigation-show. The auxiliary navigation can be used in addition to the main navigation on desktop or as the main mobile navigation.
By default the hamburger menu link is hidden on desktop and only shown on screen widths below 768px. On mobile the hamburger menu link is always shown. To show it at all times simply remove the class .hide fromt the .navigation-show wrapper.
To make the hamburger menu link open the side navigation, add the id #side-nav-show to the .navigation-show link.
To make the hamburger menu link open the overlay navigation, add the id #overlay-nav-show to the .navigation-show link.