Make Course Menu Sticky

This idea has been developed and deployed to Canvas

For more information, please read through the  Canvas Release Notes (2021-10-16) - Instructure Community


I know this was already created as an idea a couple of times already but I'd like to open it up again as a new idea. With the recent changes to the Canvas layout it might be a good idea to revisit this.

 

When scrolling down in a course the course menu will disappear. See screen shots. In the first one you can see that the menu is present.

192784_Screen Shot 2016-07-20 at 10.06.59 AM.pngScreen Shot 2016-07-20 at 10.06.59 AM.png

192797_Screen Shot 2016-07-20 at 10.07.46 AM.pngScreen Shot 2016-07-20 at 10.07.46 AM.png

In the second one you can see the menu is gone. This is very cumbersome especially when on the modules screen or another screen that is really long. I'd like to have the course menu be in a sticky position to the left like it was before.

Please also refer to this closely related idea: https://community.canvaslms.com/ideas/5489-freeze-top-left-and-side-banners-of-canvas

 

60 Comments
60640769
Community Novice

This is a great idea. The amount of time I spend scrolling back up to the top of a long page/module is not insignificant.

nsweeten
Community Contributor

This is so true,  @ProfessorBeyrer .  Some designers/faculty may never notice this issue if they work on certain types of courses where content is brief or quizzes are short.  For everyone else, it is a real drawback.

nsweeten
Community Contributor

Canvas responds better if we don't specify "how" to make the change from a programming perspective.  In this case, sticky means keeping the menu framed in view regardless of scrolling on long pages.

Currently, when content is significantly long, the menu disappears from the side view--even though the blank space is still there and the screen real estate is still consumed--and it is up to the user to just "know" the system well enough to know to scroll back up to make navigation choices. Users are often just stuck and do ridiculous things like exit the course just to get back to a menu.

SHEBENE
Community Champion

Earlier in this thread I believe  @aleonard ‌ posted the code we use to make our course nav sticky. Been using it for a couple years now. Good stuff.

SHEBENE
Community Champion

Ah, I see you responded to that very thing  @sweetera ‌

nsweeten
Community Contributor

Custom Javascript is not a viable solution at my institution.  As a long-term Canvas Institution, changes at an institutional account level will impact existing courses waaay too much.  (It may be possible for a new user institution. Not sure.) 

The problem with custom Java is that it may conflict with future Canvas changes--then who is responsible for crashing the entire interface? Not Canvas. 

nsweeten
Community Contributor

Even if the menu collapsed entirely, you would want the control stack "hamburger" to be visible, so even that would need to be "sticky", right?

nsweeten
Community Contributor

Has your institution has issues with your custom Javascript causing your instance of Canvas to malfunction after updates?

nsweeten
Community Contributor

Your idea of a collapsible menu is not the opposite; it is highly compatible with this idea.  If you had a collapsible menu, you would still want the control stack "hamburger" icon to remain visible to users deep in the content.  It could take up less real state, but you would still want it visible. 

SHEBENE
Community Champion

We only had one issue where it wasn't sticky anymore due to a minor change made by Canvas. It is something that we look at during the beta phase, how our numerous changes are holding up to the changes Canvas makes. We have been using Canvas since late 2013 so I'm not sure how long you've been using Canvas is too much of a big deal other than the longer you do something the more chances for an issue. That goes with everything in life I suppose.