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). Alternatively, 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.
Source Code:
Location of Icon Areas
