Hiding the Course Navigation bar on CodewithMosh

Hi everyone,

I wanted to open a discussion regarding the CodeWithMosh site, specifically, if anyone has figured out how to hide the Course Navigation bar on the right using a JavaScript command.

I tend to work on courses during the evenings/early morning, and I always use split screen, so I can see the course videos, and the chrome window for whatever I’m working on (currently doing the JS React course).

I recently figured out how to easily/quickly change the background colour of the video player to be a darker colour by using the console to writer a couple of JS commands
// this ones changes the background to a colour that’s close to the VS Code colour that Mosh uses
document.querySelector(“body > section > div.course-mainbar.lecture-content.full-width-content”).style.backgroundColor= “#1d222d”;
// This one changes the text to a white colour so it can be visible on top of the dark background
document.querySelector(“body > section > div.course-mainbar.lecture-content.full-width-content”).style.color= “white”;

I’m trying to hide the navigation bar on the left so the video can expand and look better, this would allow me to clearly see what Mosh is doing. I know if you make the window small enough it disappears but that’s not working too well as by that point the video player window itself is too small.

Ideally, I want to be able to find the attribute/property that sets the course navigation bar as visible or hidden and change it using a JS command

Many thanks for reading and if you’ve got any other tricks on the site let me know.



You can also save this as a bookmark and then accomplish it with one click by following this guide: javascript - Function as Google Chrome bookmark - Stack Overflow

1 Like

Thank you very much @deeess , it works perfectly. I’ve actually created it as a button function on a chrome extension I’ve built, so won’t be adding it as a bookmark too, but thanks this is certainly useful for the future.