Skip to main content
Solved

Hide learner_sidebar on course pages

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: 

 

View original
Did this topic help you find an answer to your question?

grace.filkins
Forum|alt.badge.img

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

 

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
1 person likes this
  • grace.filkins
    grace.filkins
grace.filkins
Forum|alt.badge.img

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

charles.zimmerman
1 person likes this
  • charles.zimmerman
    charles.zimmerman
grace.filkins
Forum|alt.badge.img

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
1 person likes this
  • charles.zimmerman
    charles.zimmerman
D
  • DeeCee
  • New Contributer
  • January 7, 2025
grace.filkins wrote:

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
DeeCee wrote:
grace.filkins wrote:

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
grace.filkins
Forum|alt.badge.img

​@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: 

 

D
  • DeeCee
  • New Contributer
  • January 9, 2025

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

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings