cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jtorres1
Community Contributor

How can I adjust the font size or width of my Global Navigation Bar?

Jump to solution

The most recent Canvas updated changed the size of my global navigation bar. The titles of my links are compacted now. Any suggestions for a fix?

245754_pastedImage_1.png

 

Thanks!

1 Solution

Accepted Solutions

James is right... it is caused by the scroll bar (which is caused from adding custom icons in the global nav.)

Assuming you want to keep the custom icons in the global navigation, you have 2 options

1) decrease the font size in the global nav

2) widen the global nav

In my own instance, I chose to widen the global nav by 6px and it did the trick.  This is the code I used in my CSS.

/* Widen the global navigation (default is 84px but causes text wrapping if a scroll bar is present) */

body.primary-nav-expanded .ic-app-header {
width: 90px;
}

I hope this helps!

Disclaimer: Make sure it works as desired in your test instance before doing it in your production site. Smiley Happy

View solution in original post

13 Replies
abunag
Community Champion

I'd suggest contacting your school's Canvas Admin to investigate.  It looks like they have custom CSS/JS and it may be interfering.

James
Community Champion

It looks like the extra items that you've added to the global navigation bar are causing a scroll-bar to appear and that's what's pushing things over and wrap. Without that scrollbar, all of the Canvas-supplied icons and verbiage fit.

The good news is that your scrollbars are now fat. The skinny scrollbars been a complaint of Chrome users for a while now: Skinny Scrollbars Chrome . The bad news is that fatter scrollbars take up more room, leaving less room for your text.

The other bad news is that the issue is dependent upon the screen resolution. You have so much information in your navigation menu that it causes scrollbars to appear. Other people may have more vertical real-estate and not have that problem. Others may have less and have the issue. With the features we have enabled (nothing custom and no Commons), the scroll-bar starts appearing when the vertical resolution gets down to about 600 px.

I would start with shortening the names of your menu items. The "Student Email & Office 365" takes 4 lines and is likely going to take at least 3 even without the scrollbar. Why does it need to be "Student Help?" instead of the Canvas-supplied "Help?" Do faculty not get help that way?

Anyway, you probably don't like those suggestions, but I thought I'd throw them out since the issue is mostly one of your creation.

Another option, which is worse for accessibility and those who benefit from the larger fonts, is to go through and change the font-size for the menu-item__text class. Currently, it's set to 0.875rem. You can play around with it to get it so words fit on one line.

Either of those solutions is much easier than trying to widen the navigation bar.

jtorres1
Community Contributor

Thanks, James! I've had the menu item names set up like this for nearly a year now with no issues, until the update Saturday. We've always had the scrollbar and it has never been an issue for us. The problem today is that "Dashboard" and "Library Resources" now looks different. I will continue to work on a fix. Thanks again.

James
Community Champion

Were the scrollbars wide before now? I just now noticed it, but I had applied some custom CSS to my local browser to give me back the full-size scrollbars so it might have happened earlier and I just missed it.

jtorres1
Community Contributor

No, the scrollbar was thinner before the update.

James is right... it is caused by the scroll bar (which is caused from adding custom icons in the global nav.)

Assuming you want to keep the custom icons in the global navigation, you have 2 options

1) decrease the font size in the global nav

2) widen the global nav

In my own instance, I chose to widen the global nav by 6px and it did the trick.  This is the code I used in my CSS.

/* Widen the global navigation (default is 84px but causes text wrapping if a scroll bar is present) */

body.primary-nav-expanded .ic-app-header {
width: 90px;
}

I hope this helps!

Disclaimer: Make sure it works as desired in your test instance before doing it in your production site. Smiley Happy

View solution in original post

jtorres1
Community Contributor

Thank you, Mike! It worked perfect!

James
Community Champion

Nice tweak Deactivated user. 

I feel the need to reiterate that we're reacting to what we see. I could put the emphasis on so many different words there "we" or "see" or even "react". I remember many a discussion in the Community about faculty who wanted students to see exactly like they saw on their browser on their home computer. That's terrible for accessibility and the conversation often turned into a statement about Canvas looking at multiple browsers and devices and making it look good for the many, not for the few. Sometimes they get it wrong and six months, but they still look at it in more places than any of us do.

Yet having so glaring of a problem makes us feel that we need to do something.

Unfortunately, the way Canvas does things makes it difficult to completely cure the problem. The width of the navigation bar is in pixels but the font size is specified in relative ems while the thing it's relative to is probably measured in points. That rem thing is important for accessibility, but it doesn't play nice with the pixel thing.

For example, let's say that I need a larger font so I can read the screen. I zoom in the browser or I can set my default font size. I prefer to set the default font size. When I change it from 16 pt to 18 pt then I get this in Firefox:

245892_pastedImage_2.png

Now, 16 pt is often the browser default, so designing so it looks good there is reasonable. It also takes me shrinking the viewing window height to about 600px before the scrollbar is introduced. That's not including Commons, but it's also reasonable to assume that most people with a browser have at least that much vertical real-estate and so there won't be a vertical scrollbar on the global Navigation menu -- for the vast majority of people using Canvas in an institution that doesn't apply custom changes.

Contrast that with the desire to have the menu bars take as little space as necessary so that the actual content gets the most space. When you do that, what I arrive as is that Canvas has the settings where they want it.

Also factor in that the words on the left menu are for English and that there may be other locales that have longer words. For example Spanish uses Administrador instead of Admin and it wraps like you're seeing the Dashboard do now. French has the even longer Administrateur. The dashboard is Tableau de bord in French, but none of the words are long enough to cause an individual word to wrap.

None of this is intended to say you shouldn't fix it for your users, just a reminder that the way we view things may not be the way that others view things and there is no way I know of to make pixel and rems to play nice together.

I originally said making the bar wider would be more difficult because I don't know what implications that has for other things that are based on the width. For example the left margin for the rest of the page is based on an 84 pixel navigation bar. Here are places that 84px showed up in the CSS.

body.primary-nav-expanded:not(.no-headers) .ic-Layout-wrapper { margin-left: 84px; }

body.primary-nav-expanded .ReactTray__Content { left:84px }

Do you change those as well or just leave less space between the global navigation menu and the content? I didn't check to see if there were widths that would need altered as well or right margins that would need changed.

A better way is to search the source code for $ic-header-primary-width. All of this is found under /app/stylesheets. The part before the colon is the filename and the part after is the relevant text. If it looks like the output from the find utility, that's because it is.

base/_variables.scss:$ic-header-primary-width: 84px;

base/_ic_app_header.scss: width: $ic-header-primary-width - 30;
base/_ic_app_header.scss: width: $ic-header-primary-width;
base/_ic_app_header.scss: left: $ic-header-primary-width - 30;
base/_ic_app_header.scss: left: $ic-header-primary-width;
base/_ic_app_layout.scss: margin-left: $ic-header-primary-width - 30;
base/_ic_app_layout.scss: margin-left: $ic-header-primary-width;
bundles/discussions.scss: margin-left: $ic-header-primary-width + ($ic-sp*2);
bundles/dashboard.scss:$nav-collapsed-width: $ic-header-primary-width - 30;
bundles/dashboard.scss:$nav-expanded-width: $ic-header-primary-width;

To see more what would need changed, you could go into each of those files and look for the rest of the CSS.

It may be easier to change the font on the navigation menu items. Perhaps just on the long ones. I explored some code that used JavaScript to find out how long each name in a roster was and then adjust the column width to be that wide, but you could do something similar to look at all of the words, find the longest one, and if it's going to take multiple lines, then shrink the font size on just that one item. That may be subject to the minimum font size restrictions on a browser, so even that's not a perfect fix.

That still ignores people who use a different language (this may not be a problem at your institution) or people who change the base font size in their browser.

Whatever solution you come up with, though, it's not going to work for 100% of the people and it may not be as easy as just changing one line of CSS (or it might be).

John_Lowe
Community Champion

If the scollbar in the menu is the main problem, could a solution be to not show the scrollbar? Font size stays and width stays, but if you've added stuff to the menu, it may or may not display.