Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The navigation module takes a step back from all the complicated menu and navigation design paradigms of the modern web, like dropdown menus and hamburger buttons, and tries to reinvent the basics for page navigation using HTML5 elements (i.e. header, nav and footer) and make navigation fully accessible for screen readers. Instead of sticking to either horizontal navigation menus (headers) or vertical menus (sidebars), we opted to allow the use of both for different things. Header menus are designed to stand out and contain links to help users find new content, whereas vertical navigation aims to provide a more traditional navigation menu that maps out your website's structure. Finally, footers are also part of the navigation module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.
To use the navigation module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
To customize the navigation module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
The navigation module contains definitions for styling the <header> element, along with its contents (logo and links).
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $header-height | Height | +The height of the <header> element | 44px | +
| $header-back-color | Color | +Background color for the <header> element | #263238 | +
| $header-fore-color | Color | +Text color for the <header> element | #fafafa | +
| $header-border-style | Border | +Border style for the <header> element | 1px solid #424242 | +
| $header-margin | Margin | +Margin for the <header> element | 0 | +
| $header-padding | Padding | +Padding for the <header> element | 2px 8px | +
| $header-box-shadow | Box shadow | +Box shadow for the <header> element | 0 1px 3px rgba(0,0,0, 0.1) | +
| $header-logo-name | String | +Class name for the <header> element's logo | 'logo' | +
| $header-logo-font-size | Font size | +Font size for the <header> element's logo | 1.75em | +
| $header-logo-line-height | Line height | +Line height for the <header> element's logo | 1.2 | +
| $header-logo-margin | Margin | +Margin for the <header> element's logo | 1px | +
| $header-logo-padding | Padding | +Padding for the <header> element's logo | 3px 0 0 | +
| $header-link-hover-color | Color | +Hover color for the <header> element's links | #37474f | +
| $header-link-margin | Margin | +Margin for the <header> element's links | 2px 0 0 | +
| $include-header-sticky | Logical | +Enables sticky <header> elements1 | true | +
| $header-sticky-name | String | +Class name for the sticky <header> element1 | 'sticky' | +
$header-sticky-name will only be used if $include-header-sticky is set to true.If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.