cancel
Showing results for 
Search instead for 
Did you mean: 
Surveyor II

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
Adventurer II

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

0 Kudos
11 Replies
Adventurer II

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

0 Kudos

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

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.

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

Updated the links. Try now.

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>

This was absolutely AMAZING! Thank you so much! 

Adventurer II

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

 

Learner II

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