Freeze top, left, and side banners of Canvas.

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 have suggested this in the past but it didn't seem to gain traction so I thought that I would bring the idea up again.  It is just a very annoying feature that could be correct rather easily I would imagine.  It would be nice if Canvas froze everything but the interior page.  In other words, let's say you are in the "Modules" page. When you scroll down, the way it is now everything scrolls and you lose site of your courses, grades, calendar, etc. as well as all of your global settings.  Depending on how long your "Modules" page is, for example, you even lose sight of the left hand navigation tabs as well (Home, Assignments, etc.)  I think that those should be stationary, just as if you were to lock columns or rows in Excel.

Please also refer to this closely related idea: https://community.canvaslms.com/ideas/6112-make-course-menu-sticky

 

97 Comments
James
Community Champion

Because I think it's a terrible idea.

I hate menus that stay on the screen when you scroll, especially the one at the top when there is no reason for it. I would advocate collapsing the global navigation menu in the new UI as well. I do a lot of work at school on a 1024x768 monitor (hooked to overhead projector so it can't be increased and have the students read anything) and real-estate is precious.  Because of those side menus in the legacy UI, I have a little strip in the middle to display content. I often have to increase the zoom on the browser to get just the assignment or wiki page to show large enough to read, but at least I can scroll left or right to avoid them. Forcing those items to remain on the screen are going to make it unusable.

Also, this is something that someone should be able to do through their global CSS files so it can be done on a school by school basis or on a user-by-user basis by injecting your own CSS overrides using something like Stylish.

eabshire
Community Novice

Well, you have your opinion but I totally disagree.  I hate having to continually scroll up just to be able to select another tab for navigation.  When you have a long Module page, for example, this gets very frustrating.  One should be able to simply click from anywhere on the page.

Regarding doing it at the school level, that is not so easy all of the time.  And user-by-user only works if you have individuals with IT know how in order to perform the necessary functions.  Having Canvas do it permanently, or having them insert a button for those of us that wish to have it freeze, would be the best method.

You might want to consider upgrading your resolution to have additional "real estate" if that is a possibility.  I know that budgeting won't allow this at times.

I think that you are in a minority with this one, I just hope that I get enough votes to move this forward as I think more people would agree with me on this issue than with your stance.

Thanks for your comments anyway.

japarodi
Community Novice

Here is a screencast example of what this could look like:

CSS that would lock the canvas menus on right left and top - YouTube

While this is a crude example of how this could be done, the basic CSS to do this is here:

#right-side-wrapper {

    position: fixed;

}

#left-side {

    position: fixed;

    left: 5%;

    top: 15%;

}

.ic-app-nav-toggle-and-crumbs no-print{

    position: fixed;

    z-index: 10000;

    background: rgba(255, 255, 255, 0.75)

}

James
Community Champion

 @japarodi ​​, thanks for the CSS that shows how easy it would be for someone to add this if they wanted it.

I thought I'd mention that these settings depend on your screen resolution, which means that it should not be added to a global CSS file that affects all users and that people who use it will probably want to tweak it for their screen resolution. Try dragging your browser window to see the effect that different widths has.

Also it doesn't work well with the Legacy UI, which is what we're stuck on for another couple of weeks. But I did go into the new UI on our test instance to see what it looked like.

eabshire
Community Novice

Excellent, and thanks.  However, I don't even know where to insert the code.

eabshire
Community Novice

Easy to add for someone that knows code and where to put it.  We shouldn't have to add it.  Something like this should be an option that Canvas installs.  Not all are programmers.

BKINNEY
Community Contributor

I think you are both right. It certainly drives me crazy to lose my menus when I scroll down, but it is even worse when those same menus take up desperately needed space while projecting. The solution, in my opinion, is to BOTH fix the menu, and make in collapsible. When the hamburger menu first came out, I asked why you had to be on a narrow screen in order to take advantage. My question was never answered. If we were to link those two requests together, @ James, would your vote change?

eabshire
Community Novice

Nice solution!

BKINNEY
Community Contributor

You need to have access to an account or sub-account theme editor. Look for the upload tab. From there, I think you will see what to do.

James
Community Champion

Becky, I'm not a fan of fixed menus, nor of menus that decide to automatically put themselves at the top (like documents here in the Community do once you reach the comment section). In general, most of the websites that I've been to that attempt to do responsive design do it poorly and it's turned me off to them. I think that the course navigation menu is more important than the global navigation menu so I'd rather have the global collapse while leaving the course menu, but there is something about the word "global" that suggests it's available. My main issue with the hamburger menu is that I wouldn't know to click on it to get a menu, so when I have a small screen, I'm going to be going "Where's my menu?". Yes, I will get used to it, but how is someone not tech savvy and who doesn't have a smart phone supposed to know that when they go into their online course?

As for fixed and/or collapsible menus, I've been on sites where the menu automatically appears when you move your mouse to the left side of the screen and otherwise it's hidden. Hated it! because it pushed everything else over rather than just popping out a menu. Another concern is keyboard usability. What do you do without a mouse. Currently, tab will move through all of the hyperlinks in order. When you're at the appropriate place, you can move from the navigation menu to the main document. But if the main menu is always present, how do you access it with the keyboard without memorizing another set of access keys?

I'm not saying those don't have solutions. I'm just saying I'm not a fan of fixed menus unless you have an application (I don't like frames, either). But I personally don't think fixed menus belong on a web page where there is already an application menu (the browser's menu). Besides, the top of the screen is just a control-home (on a pc) away, so it doesn't take much for me to get to the top. Fixed menus are also not the way mobile apps are written and I think part of the redesign is to make the mobile app and the web-UI look more similar.

So, I guess the short answer is no, I don't see myself supporting this, and while there's a part of me that would like to see the global navigation menu collapsible, there's a part of me that says it's going to confuse people more. But I will say that I don't think the web interface is matching a mobile-friendly design, which would have a global menu at the top or bottom (that may or may not scroll off the screen when you do - but I would say it should) and then have the course menu be an icon on the global menu. But seriously don't listen to me any time I say mobile friendly, I don't have a cell phone and find my wife's terribly confusing. Maybe that's why I resist making the web interface look and act more like a mobile device.