How do I add Global Nav item?

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!

Find more posts tagged with

Accepted answers

Robert

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.

All comments

Robert

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.

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

ChrisMedina

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

kimhuang

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

Robert

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-links.js#L81

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

Robert

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.

Robert

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

unknown

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?

yra

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.

LauraM

Are we to the point yet in Canvas that we can just create global navigation options without all the extra CSS? Shouldn't there just be a setting to add a folder or page or course and choose your icon or upload your own option?

Unanswered Questions

Canvas Media Question
How can one track Canvas Media use without having the reports available from Canvas Studio? Checking API endpoints and the Data 2 schema, there do not seem to be dedicated Canvas Media endpoints. Am I missing some? A method I've considered is using the body field of the wiki_pages table, as this contains the html code of…
Canvas Catalog API - Completed Certificates
Hello, I'm trying to utilize an API call to pull completed certificates and was hoping to download and store the certs as a backup. I can successfully run the API call but it will not allow me to view the certificate unless I access the URL while signed into an account where it's "my" cert. Is there a permissions setting…
UI for weekly progression idea
UI for weekly progression idea that rest in the Schedule tab of the **K-12 UI** of Canvas it's incomplete and I really would not take it and push it into instance but I am going to post it here because in the past people like @James && @robotcars || @Steve_25 have had terrific input in the past... maybe w/their eyes and…
Canvas integration with React + Flask webapp - initially for authenticaiton
I have a new React + Flask webapp. It has its own login for users to start using the app. I have added this as an external tool in Canvas. What I want initially is to see of canvas users can start using the webapp without having to login if they click on the external tool link in a canvas course. I have 2 methods…
add `desc` or `asc` to a few api calls that are already sorted by date\time\index such as `due_at`
A case for this argument: I live in thee K-12 realm which means we have way too many assignments... which means that at times a simple last 10 assignments of a course question(last 10 date wise) will take us 300 assignments to answer Solution for this example in particular: I would love to make this modified version of an…