Skip to main content
Solved

Hide learner_sidebar on course pages

  • July 22, 2024
  • 13 replies
  • 143 views
grace.filkins
Forum|alt.badge.img

Currently I use Custom CSS in a course to hide the sidebar for testimonial and the share container. However I would also like to hide the learner sidebar that pops up on the left. I inspect the page and it looks like the element is called learner__sidebar. However when I add it in like my other hide codes it does not hide. 

 

Here is what should work:

.learner__sidebar { display: none;}

 

Here is what I have now to hide my other pieces I do not want shown. 

.sidebar__testimonial { display: none;}
.share__container { display: none;}

Best answer by grace.filkins

​@charles.zimmerman and ​@DeeCee here is the code I used. It is not perfect but I found it helps fill the screen more. 

 

.learner__sidebar{ display: none;}
.learner__container__toggle{ display: none;}
.learner__content{height: 100%;
            width: 100%;}

Without the height and width code: 

 

 

With the code: 

 

A

13 replies

grace.filkins
Forum|alt.badge.img
  • grace.filkins
  • Author
  • Inspiring
  • July 22, 2024

@charles.zimmerman I thought of you when I was positing this? Any ideas?

 

charles.zimmerman
charles.zimmerman
Forum|alt.badge.img+3

@grace.filkins So you want to hide TOC in a course ?  It will look like this.  And then now you will have to add some more CSS if even possible to fill in what looks like is missing.

 

Lifelong Learner
charles.zimmerman
Forum|alt.badge.img+3

@grace.filkins Try this.  You were super close.  

.learner__sidebar.__web-inspector-hide-shortcut__ {

    display: none;

}
 

Lifelong Learner
charles.zimmerman
Forum|alt.badge.img+3

This is interesting.  When applied, that CSS I posted above just centers the content window and hides the default expanded nav so that it now behaves as if a mobile device with a folded nav.  I kinda like it.  

 

Lifelong Learner
grace.filkins
grace.filkins
Forum|alt.badge.img
  • grace.filkins
  • Author
  • Inspiring
  • July 23, 2024

@charles.zimmerman that is perfection! I am going to give it a try. 

charles.zimmerman
grace.filkins
Forum|alt.badge.img
  • grace.filkins
  • Author
  • Inspiring
  • July 23, 2024

SO I had to change up my code just a bit to make it work, but now I have to figure out how to stretch the content window. 

 

charles.zimmerman
D
  • DeeCee
  • New Contributer
  • January 7, 2025

SO I had to change up my code just a bit to make it work, but now I have to figure out how to stretch the content window. 

 

Grace, would you mind sharing the CSS that you used to make the change? Did you figure out how to stretch the content window?

charles.zimmerman
Forum|alt.badge.img+3

SO I had to change up my code just a bit to make it work, but now I have to figure out how to stretch the content window. 

 

Grace, would you mind sharing the CSS that you used to make the change? Did you figure out how to stretch the content window?

​@DeeCee  Try instead of view equals 100% try 100vh and 100vw.   This says stretch to fill full view port vs stretch to 100% of Ti’s prescribed flexbox.

Lifelong Learner
D
grace.filkins
Forum|alt.badge.img
  • grace.filkins
  • Author
  • Inspiring
  • Answer
  • January 7, 2025

​@charles.zimmerman and ​@DeeCee here is the code I used. It is not perfect but I found it helps fill the screen more. 

 

.learner__sidebar{ display: none;}
.learner__container__toggle{ display: none;}
.learner__content{height: 100%;
            width: 100%;}

Without the height and width code: 

 

 

With the code: 

 

grace.filkins
D
D
  • DeeCee
  • New Contributer
  • January 9, 2025

Thanks both. I’ll let you know if it works!

A
  • alexi
  • Active Participant
  • September 23, 2025

​@grace.filkins Would you have any idea on how to hide the progress widget only? 

(if I still want resources, notes, and the menu to show in the toggle, but not the progress bar)

 

I tried this but nothing changed: 

 .sidebar-progress-content { display: none;}

grace.filkins
Forum|alt.badge.img
  • grace.filkins
  • Author
  • Inspiring
  • October 1, 2025

​@grace.filkins Would you have any idea on how to hide the progress widget only? 

(if I still want resources, notes, and the menu to show in the toggle, but not the progress bar)

 

I tried this but nothing changed: 

 .sidebar-progress-content { display: none;}

 

So the progress has to be hidden by disabling progress in Utilities. 
Course > Content > Utilities Disable Show Progress. 

 

A
A
  • alexi
  • Active Participant
  • October 2, 2025

Thanks, Grace!

Terms & ConditionsCookie settingsAccessibility statement