Customise the width of the course navigation menu

The course navigation menu is a very powerful navigation option for those who wish to keep the homepage (dashboard) disabled within a course. In other words, users are taken directly to a page instead of seeing the dashboard when they load the course / web page and they can navigate by going through the course navigation. However, the course navigation panel is limited in width which leads for the title not to be fully displayed. There need to be an option to allow text wrapping for long titles or for the panel width to be adjusted from the theme settings. Currently, you can only set the course navigation panel to appear on the right side instead of left side and the background colour can be changed but the width is standard.

This feature is very critical to our workplace as our stakeholders prefer for courses to open directly instead starting with a dashboard menu.

3 Likes

Thank you Haitham - wrapping the text for this menu has indeed been requested before - I will add your vote!

1 Like

Just encountered a situation where this would be reeeeallly useful. If the text could wrap and/or the width of the navigation could be increased, it would be a much more useful feature.

While you can do your best to keep the titles short and concise, it often proves a problem when text is translated to an unknown length.

Bumping this thread

Hi Ruppers.

I wrap the Course Navigation text by adding the following CSS to the bottom of the player.css, after publishing.

.ev-course-navigation .ev-navigation-item .ev-navigation-item-title {
white-space: normal;
}

This will wrap the topic titles and will look something like this:

image

You will need to do this after every time you publish, but you soon get used to it. :slight_smile:

Let me know how you get on.

Cheers,

Barry

2 Likes

Cheers Barry!
Unfortunately our client needs to be able to edit this in their own instance so we’re trying all we can to avoid any post-publishing tweaks. Appreciate you sharing your solution though, it’ll come in useful for other projects for sure.

Any chance we could incorporate this into Evolve as standard @hbailey - can’t imagine a downside to wrapping text in a menu that has a constrained width…

Obviously very late to be following up on this - but just in case you weren’t aware: this functionality was added to Evolve and released in v10.4.1 back in June

4 Likes