Navigation v.1.0.5

Menus

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.

Example - Left Aligned
Example
Example - Centered
Example
Example - Right Aligned
Example

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.

Example

Mega Menus

Example

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.

Example

Auxiliary 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.

Example
Launching Side Navigation

To make the hamburger menu link open the side navigation, add the id #side-nav-show to the .navigation-show link.

Example
Launching Overlay Navigation

To make the hamburger menu link open the overlay navigation, add the id #overlay-nav-show to the .navigation-show link.

Example
Theme Mountain

Current Version