Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Contributor

Custom JavaScript/CSS Changes

Jump to solution

Hello all,

Question. Over the weekend there was a Canvas Production Release. In the notes, it mentions undocumented changes to the CSS/Javascript. It seems that those changes have broken our Resources Tab, specifically the slide out menu. We've tried rewriting the code, and even used the code found here as a basis: canvas-contrib/Branding/JS_and_CSS/react-tray-link at master · kajigga/canvas-contrib · GitHub 

Has anyone else had this issue or have any thoughts/ideas as to what has changed?


56 Replies
Community Champion

Thank you for this explanation, Deactivated user!. It's super helpful. We appreciate you taking the time to help us understand what happened and why.

Community Contributor

Thanks, Deactivated user‌! This was very helpful and informative.

Community Contributor

Thanks, Deactivated user!  This helps, but a second global nav option helps us separately 'chunk' Instructure Tier I support, Canvas Guides, & etc. links away from links to more drawn-out, but related, trainings (material curations in institutionally visible, not enrollable course shells), 3rd party LTI guides, and campus relevant resources (online tutoring, TItle IX resources, information security awareness information, etc.).  We've found it's very handy to keep our faculty and students still logged into and looking at our Canvas instance for these trainings and guides; keeping them w/in short reach & at their fingertips because they pertain immediately to their use of and experiences w/in the LMS, may share single sign on/CAS, and address issues that should be in the forefront when working with the LMS.  A second help menu option not labeled "Help" with an icon differentiating it from immediate support for using Canvas is pretty ideal...

The image below is of what our list of links in our "Help" menu has become for instructors since the custom option "broke".  All of our faculty are also students in trainings as well... Paring "Help" down to the top 4 links would be great.  The second nav. option would accomodate the links following; though, these would still be further streamlined to only show respective of course role...

Feel free to ask me questions about this.  Thanks for reading/making it all of the way through the above wall of text.

273098_Screen Shot 2018-04-16 at 1.41.04 PM.png

Community Champion

Deactivated user‌ Thanks for taking the time to respond out here in the community. We really appreciate all that you canvas developers do. However I think that some of our issues are not with adding to Help menu but to adding our own Resource links for our users. Similar to what  @JACOBSEN_C ‌ mentioned in his comment above. the help menu will get awfully crowded if we add the 15 or so links to campus resources such as libraries, disability support, etc. to that option which would, IMHO make it harder for students to distinguish how to actually get to help when they need it.

Again I think this is helpful information and maybe someone can still work to find a solution for these additional options that many seem to use.

Community Contributor

Thanks Deactivated user‌ for the explanation, this really helped clear up what happened with the code. Just to expand on  @mjennings  comments above. @UAB we are currently using the custom menu item provided by Canvas for our technical help areas i.e Canvas Support, Virtual Meeting support etc. We were also using custom Javascript to add another menu item for Student Resources. As a work around I have added a onClick method directly on the student resources button that takes the students to our eLearning website. Any idea if it would be possible to have another custom menu item in the Canvas Settings? The image below explains how we have our navigation setup. 


Community Champion

I've continued taking periodic 'stabs' at this and started a new thread... 

Community Participant

Hi Clint,

Is there a way to add something like your Bookstore icon to the Global Menu. WE are looking for a way to do it but there is only 1 way is changing JS, I looked at the current one we have and here is the only thing we got, can you share with us how you did for the Bookstore icon? Thanks

// set timeout
var tid = setTimeout(mycode, 250);
function mycode() {
  //Hide Report a Problem Link from everyone regardless of role
  $('#help-dialog-options a[href=#create_ticket]').parent() .hide();
   tid = setTimeout(mycode, 250); // repeat myself

Community Champion

Hi Quan,

Are you looking for a tray menu with multiple links, or just 1 icon link?

Community Participant

Hi Robert,

I just need to add another link to the Global which linked to a training course for everyone, like in the white area under HELP in this image. Thanks

344014_Screen Shot 2020-04-06 at 2.25.00 PM.png

Community Champion

Hi Quan,

I've found that this example posted by  @garrett_william ‌ here #comment-111883, works pretty well for a quick setup.

The icon options are from Instructure icons, but you can add a custom image if you want. I haven't tried that part.

Icons you can use are here, instructure-ui - A design system by Instructure Inc. (6.23.0) 

Try not to use icons that have meaning in other parts of the UI.

$(document).ready(function () {

var styleAdded = false;

function addMenuItem(linkText, linkhref, icon, target) {
var iconHtml = '',
linkId = linkText.split(' ').join('_'),
iconCSS = '<style type="text/css">' +
' i.custom_menu_list_icon:before {' +
' font-size: 27px;' +
' width: 27px;' +
' line-height: 27px;' +
' }' +
' i.custom_menu_list_icon {' +
' width: 27px;' +
' height: 27px;' +
' }' +
' body.primary-nav-expanded .menu-item__text.custom-menu-item__text {' +
' white-space: normal;' +
' padding: 0 2px;' +
' }' +
if (icon !== '') {
// If it is a Canvas icon
if (icon.indexOf('icon') === 0) {
iconHtml = '<div class="menu-item-icon-container" role="presentation"><i class="' + icon + ' custom_menu_list_icon"></i></div>';
// for an svg or other image
} else if (icon !== '') {
iconHtml = '<div class="menu-item-icon-container" role="presentation">' + icon + '</div>';
// Build item html
itemHtml = '<li class="ic-app-header__menu-list-item ">' +
' <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' + iconHtml +
' <div class="menu-item__text custom-menu-item__text">' + linkText + '</div>' +
' </a>' +
$('#menu .ic-app-header__menu-list-item').last().before(itemHtml);
// Add some custom css to the head the first time
if (!styleAdded) {
styleAdded = true;


addMenuItem('Training Course', '', 'icon-certified', '_blank');

Additionally, you mentioned hiding the Canvas Report a Problem option in the help menu. It's easiest to do that with CSS, not JavaScript. You can add this to your CSS file in your themes.

/* hard-code kill the canvas help item */
#help-dialog-options a[href='#create_ticket'], a[href='#create_ticket'] {
display:none !important;

Hope this helps, let me know if you have any questions.