How do I add Global Nav item?

[cbirdsong]

I'm the Canvas admin for our institution and I've been requested to add a link to our Global navigation (left side nav bar). What I'm finding so far is information on how to fully customize it but I don't need all that, we just want to add one extra icon that links out to a website. Can anyone point me in the right direction for the css code to append my existing theme files? Thanks!

We would need to update both the browser-based & mobile-based css files. Thanks!

[robotcars · Accepted solution]

Hi cbirdsong

Here's one I recently wrote to support multiple icon types. It works in the global nav, but not the new responsive navigation menu (hamburger menu), or the mobile applications.

ccsd-canvas/global-nav-custom-links at main · robert-carroll/ccsd-canvas · GitHub 

The code you would need to add to your themes javascript is here,

ccsd-canvas/global-nav-custom-links.min.js at main · robert-carroll/ccsd-canvas · GitHub 

Please let me know if you have any questions.

[cbirdsong]

OMG, You ROCK!! That worked great!! So I need to ask one more question – how do I switch out the heart to some other icon? I can’t seem to find the .svg file for that particular icon in the code you provided. I’m a js newbie so I’m not sure how to connect the .svg file to the code itself.. Thanks again!!

-Cyndie

[robotcars]

Thanks Cynthia

The heart is just an example.

Icons can be used from instructure-ui - A design system by Instructure Inc. (6.24.0) 

My only recommendation is to aim for icons that don't have much use in the rest of the UI, so they don't end up with dual meaning... like Publish and Completed (both are checks :smileyconfused:)

The documentation shows how you can use a custom hosted icon, or pasted inline.

[cdatko]

Hi Robert,

This is awesome, as I am a Canvas admin, but not a CSS/Javascript person. (Love funding cuts...) Do you happen to have an updated link for the GitHub link? I'm getting a 404 error.

Thanks so much in advance. I have hope that I can do this! 

Katie

[robotcars]

Updated the links. Try now.

[cdatko]

Awesome! Thank you so much!

Katie Datko

Instructional Designer

Glendale Community College

GCC Instructional Continuity Page<https://gcc.instructure.com/courses/25258>

GCC Remote Instruction Student Resources<https://gcc.instructure.com/courses/25488>

[cdatko]

This was absolutely AMAZING! Thank you so much! 

[maguire]

A program for adding new external tools to the navigation menu is add-external-tool-for-course.py see 

https://github.com/gqmaguirejr/Canvas-tools

[helpdesk]

although I like this it needs to be available in the mobile app too. Have you seen any solutions for this?