Make Course Menu Sticky

(8)
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

 

58 Comments
60640769
New Member

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

nsweeten
Community Contributor

It is even worse than an inconvenience for student/users and faculty who may just get entirely lost. 

People get tired of struggling and develop awkward workarounds. I have watched the (excruciating) process countless times. Users may be scrolling through a long document and don't see a next button nor a course menu.  All too often, they will log entirely out of Canvas and back on again just to see a menu!  Why?   The Nav menu screen space is already committed, it is just blank. 

Not everyone is a savvy computer user or Canvas user. It comes down to how much design effort and training time we want to build into every course to prevent users from being derailed by the interface itself.

pj1
Community Member

I agree with this idea. In my opinion it is almost essencial, as pointed out in the comments, it would spare us a lot of scrolling.

ArmstrongA16
New Member

As a Student:

When scrolling through my course through CANVAS the menu that shows "Home, Syllabus, Summary, etc.." should be static. If I'm on a discussion that has 30 posts, the user has to scroll all the way to the top to navigate to a different part of the course. This can be fixed by just making that sub menu static similar to have websites have similar headers when you scroll down. It's a QoL change that can make navigating to different portions of the course a lot easier, such as reading discussions, then clicking modules to see what was required for the week.

Below are screenshots of what I'm talking about. 

Capture1.PNG

 

 

 

 

 

As seen, when scrolling down to even the bottom of the short list of discussions, the sub-menu disappears. Sometimes discussion post can have 30+ replies so it takes a moment to get to the top.

Capture2.PNG

gvan
New Member

After you click on a course, there is a side bar that shows various options listed as: Home, Announcement, Modules, Grades, Evaluate Your Course, Library, etc...

It will be nice to have these options remain static when you scroll down the page.

For instance, we are pretty far along in the courses now and always end up scrolling deep down the "Modules" page for relevant information. It is a hassle to have to scroll all the way back up the page to see these hot links.

 

hdicarlo
New Member

Another 5+ year old request that should be a "No Brainer" which would save hundreds of us time and frustration.

Come on Canvas!

xcotto1
Community Participant

Hi @all,

I found a way to achieve this, is not perfect but all it takes is tweaking some CSS attributes. I prefer using userscript instead of overriding the global CSS  in the theme editor, so I'm using this script that I've created (Tampermonkey extension.)

 

 

 

// ==UserScript==
// @name         Static Course Menu
// @namespace    https://github.com/cotitto/canvas-userscripts
// @version      1.1
// @description  Static Course Menu
// @author       XCT
// @include      https://*.instructure.com/courses/*
// ==/UserScript==

(function() {
    'use strict';
    $('.with-left-side, #left-side').css('position', 'sticky')
    $('.ic-Layout-contentMain').css('margin-top', '-1000px')
    $('#left-side').css({"padding-top": "20px", "margin-left": "-200px"});
})();

 

 

 

@jdesiderio  I hope this helps in some way.

Best,

-Xavier

erinhmcmillan
Instructure Alumni
Instructure Alumni
Status changed to: On Beta
Comments from Instructure

The Account, Course, and User Navigation Menus remain sticky and are always visible on their respective pages. This change allows users to access the menus at any time.

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

 

Stef_retired
Instructure Alumni
Instructure Alumni
Status changed to: Completed