Custom Menu Items for New UI

  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.

137362_Screen Shot 2015-12-03 at 10.36.47 AM.pngScreen Shot 2015-12-03 at 10.36.47 AM.png

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

137363_Screen Shot 2015-12-03 at 10.41.38 AM.pngScreen Shot 2015-12-03 at 10.41.38 AM.png

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)

114 Comments
jtorres1
Community Contributor

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

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

kenneth_larsen
Community Champion
Author

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

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

tfullwood
Instructure
Instructure

 @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
Community Contributor

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

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

Hey  @kenneth_larsen ,

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

james_vlisides
Community Novice

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:

Screen Shot 2016-06-24 at 10.07.34 AM.png

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:

Screen Shot 2016-06-24 at 10.07.49 AM.png

Thanks,

kenneth_larsen
Community Champion
Author

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.