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

24 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.

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

0 Kudos

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.

0 Kudos
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! 

hechla
Community Participant

@robotcars Thank you so much for this. A couple of follow-up questions.

1. Is it possible to have the custom link not at the bottom? I think it would be great for Help to still be at the bottom. 

2. Is it possible to have the custom link open in a new window ( target=_blank )? My coding is really rusty and I'm just not seeing where I would add that, if possible. 

Thanks,
Adam

 

kimhuang
Community Participant
const links = [
{
title: "Canvas Community",
icon_svg: "icon-heart",
target: "",  <---- Here is the place you put ”_blank”, 
so it is target: "_blank" to open the link in a new browser tab
}, // ready for another

Thanks so much for this solution! However, I was just wondering if you have had a chance to solve this for the new responsive menu and mobile apps yet?

Thanks much!

-Dana

0 Kudos

Are you able to open the link in an iFrame using your JS?

0 Kudos

I added this code to our global js file, but it seemed to have no effect at all.  Has this become an outdated method?

0 Kudos
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

 

0 Kudos
ChrisMedina
Advocate

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

0 Kudos

I am only able to put this script into a locally running Canvas and not into the university's Canvas instance. Unfortunately, I have relatively little experience with the mobile app - however, I did find a listing of some limitations of doing this with a non-Instructure hosted instance  -  see https://community.canvaslms.com/t5/Question-Forum/Mobile-app-for-Local-Canvas/td-p/233459 

 

0 Kudos
kimhuang
Community Participant

@hechla Hi Adam, Have you figured out the answer to the following question

1. Is it possible to have the custom link not at the bottom?

I am also wondering about it as well. Thanks so much.

0 Kudos
hechla
Community Participant

@kimhuang - No, I never figured out how to get it to not be on the bottom. We're happy with it though. I did figure out the target AND I was able to get it to only show up for students (well, it doesn't show up for admins, teachers, designers). I guess I follow instructions pretty well. 😄

0 Kudos
kimhuang
Community Participant

I thought I posted the solution of positioning the new nav item in the desired position, but could not find it. Please forgive me if I post the duplicate answer.

Here is my solution:

replace this line of code:

$("#menu").append(n);

to :

$("#menu li:eq(2)").after(n);  <--- now the new item is at the 4th position.
robotcars
Community Champion

Hi everyone. I missed some responses during the Fall.

Re: Placement of the icon in the Menu

@kimhuang, thanks for jumping in and helping. Did you change the code to make n = icon? Not sure if others would immediately pick that up.

I played with this and found 2 flavors of solutions for folks to chose from. Note that some institutions will have a different count of Global Navigation icons based on their services/integrations/LTIs etc.

1) using @kimhuangs example, this will place the icon after a specific list item, where the value in Parens() is the existing item you want the new icon added after. This will be placed after the Users Profile/Avatar

$("#menu li:eq(0)").after(icon);

2) A solution that may more directly drop the icon above the Help menu without counting, or dealing with future additions to the help menu.

$('#menu').find('> li:nth-last-child(1)').before(icon);

 

These pertain to editing the source line on 

https://github.com/robert-carroll/ccsd-canvas/blob/main/global-nav-custom-links/global-nav-custom-li...

It's possible in a future edit to make it so individual icons can be placed specifically in the menu. 

robotcars
Community Champion

Please note this was developed before the Responsive Navigation Menu, and any user on a smaller ViewPort device will not see the Extra icon. I will get to this as time permits.

robotcars
Community Champion

@dsimmelink I have not, but I will try to carve out some time soon. I'm in a weird place where everything I'm doing is new, and finding time for smaller projects has been tough.

0 Kudos

Totally understand where you're coming from there! I'm implementing your current solution that works great (sand mobile interfaces) but am looking forward to having a solid solution for all devices.

Thanks again for your great work to help all of us!

0 Kudos
atreadwell
Community Member

This thread is the only source of information I have found on this topic and I'm grateful for all the responses and code samples!

I too have been trying to add items to the responsive mobile navigation menu recently with no success. The biggest hurdle is that the HTML of that menu is generated on-the-fly when the user clicks the button. So on page load (when the custom JS does its thing), the menu doesn't exist and therefore cannot be modified.

Has anyone else had any luck?

0 Kudos
yra
New Member

Is there a script for the mobile device? It works great on the PC/Mac side, but we don't want to leave out the people using tablets or smartphones.

0 Kudos