cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
cbirdsong
Community Participant

How do I add Global Nav item?

Jump to solution

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!

1 Solution

Accepted Solutions
robotcars
Community Champion

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.

View solution in original post

20 Replies
robotcars
Community Champion

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.

View solution in original post

cbirdsong
Community Participant

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
Community Champion

Thanks Cynthia

The heart is just an example. Smiley Happy

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
Community Participant

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
Community Champion

Updated the links. Try now.

cdatko
Community Participant

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
Community Participant

This was absolutely AMAZING! Thank you so much! 

maguire
Community Champion

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
Community Participant

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