[ARCHIVED] Global Nav with flyout

[ssteelman]

I need to create a button in the global navigation that has a flyout with links.  I've been trying to use the article below but it hasn't been working for me.  Does anyone have some code I can use to create a new global nav with a flyout screen where I can put links?

canvas-contrib/react-tray.js at master · kajigga/canvas-contrib · GitHub 

[robotcars · Accepted solution]

Hi  @ssteelman 

That React Tray is really old. Here's an article where we replaced it when it stopped working. It includes some screenshots. Global Nav Menu - Custom Tray 

However, the newest version of the script is here with documentation.

ccsd-canvas/global-nav-custom-tray-multi-config.md at master · robert-carroll/ccsd-canvas · GitHub 

Please let me know if you have any questions.

[nwilson7 · Accepted solution]

@AARON17 Did you add the CSS as well?  Your picture looks like what happens when you only do the js and not the CSS.  The CSS makes all the code display correctly and do the flyout.

-Nick

[robotcars · Accepted solution]

Hi  @ssteelman 

That React Tray is really old. Here's an article where we replaced it when it stopped working. It includes some screenshots. Global Nav Menu - Custom Tray 

However, the newest version of the script is here with documentation.

ccsd-canvas/global-nav-custom-tray-multi-config.md at master · robert-carroll/ccsd-canvas · GitHub 

Please let me know if you have any questions.

[ssteelman]

This is an amazing resource, and it is working for me.  Thanks so much for this. 

[AARON17]

Hi,

Can you send the link to the newest version of the script. ccsd-canvas/global-nav-custom-tray-multi-config.md at master · robert-carroll/ccsd-canvas · GitHub is no longer available. I'm trying to add Global Nav with flyout but the flyout doesn't come out when I click the icon. Thanks in advance.

[AARON17]

Hi,

Update: the links appear at the bottom of the page but it doesn't look like a flyout. How can I make it look like the one you are showing in the screenshot of your link.

[nwilson7 · Accepted solution]

@AARON17 Did you add the CSS as well?  Your picture looks like what happens when you only do the js and not the CSS.  The CSS makes all the code display correctly and do the flyout.

-Nick

[robotcars · Accepted solution]

@AARON17

There was an update awhile back and the repo was updated, check here.

https://github.com/robert-carroll/ccsd-canvas/tree/main/global-nav-custom-tray

[AARON17]

Hi @robotcars ,

Many thanks for this! It's a big help.

[AARON17]

Hi @nwilson7 ,

I see. Many thanks for the help! It is working perfectly right now.

[AARON17]

Hi!

It's me again : )

It works perfectly fine when I leave the icon at the bottom position of the global nav menu. But when I tried to move the icon to the upper position of the menu, it affects the UI. When I click the icon, the flyout opens and immediately closes. 

Here is the modification I made in the script, from o=$("#menu) I change it to o=$("#menu li:eq(7)") to move the icon in the upper position on the menu.

Any idea what is missed?

Thanks again in advance!

[robotcars]

@AARON17 

See if the solution here works for you.

https://community.canvaslms.com/t5/Canvas-Developers-Group/How-do-I-add-Global-Nav-item/m-p/442478/h...

[AARON17]

Hi @robotcars,

Thanks for your reply.

Yes, the script mod came from the link you've shared. I'm successful in moving the placement of the icon.

The problem I encounter is when I click the icon, the flyout menu opens and immediately closes. I find it weird that when I leave the icon placement, to default at the last position of the nav menu, the flyout menu works fine.

Any other idea how can I resolve this issue?

Many Thanks!

[robotcars]

Hi @AARON17 

which nav icon do you want to place the custom tray after?

[AARON17]

Hi @robotcars ,

The request is to place it after the Studio icon.