Style Guide
Search…
Navigation
The Handy navigation menu on web and mobile web provides a home for the most important and most used pages on our site.

Desktop

The menu bar at the top of our desktop screen provides easy access for the most important and most used pages on our site. The Handy logo is always on the far left and takes users to the home page, and the log in or account information is always on the far right. The navigation items align with our desktop grid.
1
Handy Logo: 64px max-width
2
Padding-left: 32px
3
4
Font-weight: Book
5
Font-color: Text Black #434343
6
Top-padding: 20px
7
Bottom-padding: 20px
8
Left-padding: 24px
9
Right-padding: 24px
Copied!
The Handy desktop navigation has two active drop down menus. The All Services menu is always always present, and the user Account menu is available for logged in users.

Mobile Web

The Handy mobile web menu is housed in a hamburger icon in the top right corner of the screen and mirrors the options from desktop. The mobile web menu opens by pushing screen content to the left. We use angle-right FontAwesome carets to indicate a list item that will push you one level deeper into the menu list. If a list item has no caret, it will take users to a new page when tapped.
1
Background-color: White #FFFFFF
2
Shadow: #000000, R:0; G:0; B:0, Alpha: 20%, 4px blur
3
Max-width: 232px
Copied!
1
font-color: Text-black #434343
2
font-size: 16pt
3
font-weight: Book
4
padding-left: 24px
5
padding-top: 8px
6
padding-bottom: 8px
7
8
Line-color: Slate-medium-light #DAE2E6
Copied!
Last modified 2yr ago