One of my favorite tools within Canvas is the HTML editor in the backend of a page, quiz, assignment, etc. Since one of my sites relies on bullet lists for navigation, I've been fussing with a way to get a checkmark next to the current unit. I figured it out a few minutes ago and wanted to share with others.
First, here is the look.
The single checkmark next to the current unit requires using the HTML editor and modifying the <li>, adding a span around the checkmark HTML entity ( ✓ ).
Here is the current code:
<li style="list-style-type: none !important;">
<span style="color: red; margin-left: -18px;">✓</span>
<a title="U04 Dynamics Introduction" href="https://puhsd.instructure.com/courses/8/pages/u04-dynamics-introduction" data-api-endpoint="https://puhsd.instructure.com/api/v1/courses/8/pages/u04-dynamics-introduction" data-api-returntype="Page">
<span style="font-size: 1rem;">U04 Dynamics </span></a></li>
The li style removes the bullet point from the list. The !important is necessary to override the Canvas CSS.
The span moves the checkmark to the left and adds the color red.
The rest is nothing more than linking the text to the correct page.
While this isn't perfect on an iPhone, it's something that others might enjoy tinkering with as they design a page.
Maybe you could even come up with a cleaner way to change one bullet point to a checkmark.