Remove inbox icon using Javascript

[marchermon]

I have been successful adding menu items to the sidebar using this thread:  https://community.canvaslms.com/t5/Canvas-Admin-Discussion/Help-With-Custom-Menu-Icons-and-Script/m-...

But now, is there a way to remove one of the icons. I would like to remove the Inbox Icon. We have disabled Conversations in Canvas because the admin wants everything to go through ParentSquare. Would love to remove the Inbox icon if possible.

[jerry_nguyen · Accepted solution]

@marchermon 

You can use the following custom CSS to hide "Inbox" button

a#global_nav_conversations_link {
    display: none;
}

Please note, this custom CSS only hides the inbox button from the web version of Canvas (E.g. not Canvas Student app) and any users can disable the custom CSS/Javascript from loading.

[jerry_nguyen · Accepted solution]

@marchermon 

You can use the following custom CSS to hide "Inbox" button

a#global_nav_conversations_link {
    display: none;
}

Please note, this custom CSS only hides the inbox button from the web version of Canvas (E.g. not Canvas Student app) and any users can disable the custom CSS/Javascript from loading.

[marchermon]

Thanks, I probably should have figured that one out, since I did something like that earlier. Forgot about the CSS file. Follow up question:  My district is using ParentSquare and I added an icon to the global nav as seen in my screenshot and then with your CSS I just hid the inbox. Is there a way I could move my ParentSquare button further up the global nav? In other words can I use CSS to order the global nav buttons?

[jerry_nguyen]

@marchermon 

No, you can't use CSS to order menu buttons. You'll need to use Javascript to move the button.

However, you can adjust your existing Javascript to insert the new icon in a particular location. If you're using Kenneth's JS you'll need to adjust this line: $('#menu').append(itemHtml); to:

$('#insert_a_element_id_here').closest('li').before(itemHtml);

This line will add the new button before a particular element (E.g. Groups icon)

You'll need to replace "insert_a_element_id_here" with the ID of the inner <a> element. You can find the ID by using Developer Tools

[chriscas · Accepted solution]

Hi @marchermon,

I'd suggest contacting your CSM / Account Representative at Instructure about this.  They may be able to help you find a solution other than using javascript/css, which may not be universal and could require maintenance down the road as @jerry_nguyen noted.

-Chris