Custom Menu Items for New UI

[kenneth_larsen]

  This idea has been developed and deployed to Canvas

  Idea open for vote Wed. January 6, 2016 - Wed. April 6, 2016  Learn more about voting...

I have had discussions with a number of institutions looking for a way to add custom items to the left hand navigation in the new UI.

Adding custom menu items

Additional Navigation Menu Item

Re: Has anyone been working on scripts for the new Beta UI? 

Like these schools, we have some items we have customized for our faculty and students that we would like to bring over to the new UI.

I have created some JavaScript code to add an individual item, but it would be great if there was a way to add an item that had a slide out list like the other navigation items in Canvas

The icing on the cake would also be the ability for the navigation to be targeted to a user's roles (additional resources for teachers verses resources for students) and if there was a way to choose an icon.

I understand that there is limited space in the left navigation for smaller screen sizes, but this would be a wonderful addition to the existing customization options in the new UI.

  Comments from Instructure

For more information, please read through the Canvas Production Release Notes (2016-08-27)

[jtorres1]

Do you know where I can find the common css file to change f13c to an icon that equals either message or email in the Canvas style guide? I am able to get the folder icon, but not the envelope I was hoping for.

Thanks so much for your thoughts!

[Chris_Hofer]

 @tfullwood ​ or  @kenneth_larsen ​...thoughts on Jennifer's question?  I don't know where this is.

[kenneth_larsen]

CAUTION: Do not use the same classes in your CSS that Canvas uses. Your CSS will override Canvas' CSS. If you have put what you listed above into your CSS, chances are everywhere an envelope should be showing up in Canvas, you have told it to display a folder icon instead that has a font-size of 20px.

This is why  @tfullwood ​ created a non-existent icon-resources class.

Better approach

If you want to use the icon-message for your left navigation just change 'icon-resources' in the JavaScript to 'icon-message'. If you want to change the font size (or anything else about that icon) use something like:

     #custom_nav .icon-message[class*=icon-]:before,

     #custom_nav .icon-message[class^=icon-]:before {

            font-size: 20px;

     }

This will change the font size only for the icon-message that is in the custom_nav div.

Hope that helps

[jtorres1]

Thanks so much! I think I'm all set.

[tfullwood]

 @kenneth_larsen ​ response should work perfectly for you. This reply is primarily for the rest of the community.

There is a page on your Canvas instance that outlines how Canvas is styled. On this page there is a section for icons. So if you did not want to use the folder icon this page provides a visual guide for you to select another icon.

You then have two options to change the logo.

First Option (this is the option  @kenneth_larsen  posted above), you can change the last block in the CSS file to whatever icon you choose (in this case icon-message). You'll then replace any reference to icon-resources to icon-message in the JavaScript file.

Second Option, if you right click on the icon in the styleguide and select "inspect" or "inspect element" (or something similar to that, it'll vary depending on the browser you use). You'll then scroll through the list of styles applied on that element until you find a block similar to this:

.icon-message:before {

    content: "\f15b";

}

You'll select the value of content "\f15b", then use this to replace the value of the content for the icon-resources in your CSS file. Which should look something like this:

.icon-resources:before {

  content: "\f15b";

}

[jtorres1]

Thanks so much, everyone! You have all been tremendously helpful!

I have one final question! I have the correct icon and my links are pointing to the correct URL, but my icon is not appearing in the global navigation bar when I am on the dashboard. I can see it from the Admin level and from within the courses. Any ideas?

[tfullwood]

That's not something I've seen happen before. I briefly took a look at your instance and it looks like you've got quite a bit in your JS file. A couple of the other items look like they've got potential for conflict.

[james_vlisides]

Hey  @kenneth_larsen ,

Would you mind sharing your banner code for this? Looks pretty great.

[james_vlisides]

Wondering if anyone has figured out a way to make the background of the added tab white when the tab is expanded?

Currently it dulls out:

From the inspector it looks like the code is adding an overlay on top of the whole Global Navigation Bar, so if I change the background it covers all of the other tabs as well:

Thanks,

[kenneth_larsen]

james.vlisides​, I have some tweaks I need to make to the banner code due to the change to the New UI. When I can get to those I will try and remember to post the updated code here.