AnsweredAssumed Answered

Help With Custom Menu Icons and Script

Question asked by Kenneth Rogers Champion on Oct 27, 2016
Latest reply on Aug 13, 2018 by Garrett Williams


Hello, community. I am hoping you can provide me with some assistance as I pose these series of questions. Thanks so much!

 

First, a little background...

course_menu.jpg

We utilize some code (I believe generously borrowed from Kenneth Larsen) to add a few menu items to our menu in Canvas. Because we support a district of five individual colleges in our instance, these items need to remain in our menu and cannot be moved to the updated Help Menu. Also, we previously decided to not include any icons with these items (see graphic to the right).

 

With the update to the course menu and it now being collapsible (see https://community.canvaslms.com/docs/DOC-8403#jive_content_id_Global_Navigation within Canvas Production Release Notes (2016-10-29)), we have now realized that the text is removed (makes sense), so we must have icons present.

 

Here's probably the biggest problem - I can read through javascript, steal some people's code (thanks, guys!), and basically understand what's going on - but sometimes you just need to wave the white flag and ask for help!

 

I have gone through several pages and sites, but I still need assistance with adding an image (I presume svg) as my icon.

 

I have modified our current javascript file to add an icon from the style sheet - this works, but the icon is removed with the text when you collapse the menu.

 

I found Josh Blumberg's post on Has anyone been working on scripts for the new Beta UI?  (his code can be found here) - and while this utilizes a svg image, but it creates a popup window. Although, in reading his notes, it says it is generalized so it can create items with or without the modal window.

 

So - the questions - does someone have a javascript fix (or js and css fix even) to add custom menu items, including an icon, that won't vanish when the menu collapses? Or is there a way to add svg icons with Kenneth Larsen's code? What about modifying Josh Blumberg's code to add three individual items instead of one item and a popup window?

 

Help?

Outcomes