Mobile Navigation Icon Links

The off-canvas mobile navigation menu has two areas for additional link icons: the mobile header icons and the mobile menu icons.

The mobile header icons are located on the top right portion of the page header when viewed on a mobile device. (See Figure 1). Alternativly, the mobile menu icons are located in the top right portion of the expanded menu when viewed on a mobile device (See figure 2).

Modifications to the mobile icons are done in the /ssi/mobile-controls.html file. NOTE: To maintain accessibility compliance, use the following format when adding new icons:

<span class="mobile-control"><span class="ca-gov-icon-chat" aria-hidden="true"></span><span class="sr-only">Contact</span></span>

You will need to modify only two parts of this snippet. In this example .ca-gov-icon-chat is the class name for the icon. Replace it with any of the provided icon fonts. Check the "Icon Fonts" page for a full list of icons supplied with this template.

The second part is the label for the icon. In the example, the label is "Contact", you should replace it with a short but meaningful label. Note that the label is inside a span with a class of .sr-only. This is a special class that visually hides the label, while allowing screen readers to announces it.

Location of Icon Areas