How to Make a Navbar Sidebar Menu Youtube Clone using HTML CSS and Javascript - Vertical Navigation

Learn how to make a navbar sidebar menu Youtube clone using HTML, CSS, and Vanilla Javascript. We will be creating a vertical navigation sidebar menu that you can toggle to slide out and in.

Our sidebar nav menu will have icons included in the design. I use fontawesome for the icons.

If you want to follow me along my coding journey, be sure to subscribe :)

Check out my playlist to see my HTML, CSS, & Javascript Tutorials

How to create a Navbar with HTML and CSS

Udacity Front end Developer Nanodegree

If you're new to the channel, I'm documenting myself learning how to code and showing you what I've made along the way. If you have any feedback on how I can improve my code, feel free to comment below! And be sure to like and subscribe :)

[rodmedia]

Your the goat bro I’ve looked at so many different channels this was the best by far man!Thank you for your help🙌🏻

[reiko-allen]

Thank you so much brother, you saved my day

[digwillhachi]

really nice video dude. Well explained and easy to follow.

[edwinwang]

This is a great tutorial. Can you open the source code? That would be a lot more convenient.

[IhsanDuru]

Hey hi, I wrote the same exact code with same indentions and without any errors my code won't work can you help me

[ramibenomrane]

an amazing tuto. hope you makes another one but with React

[gabrielballester]

Hi there, is it possible to use useRef instead of queryselector? Cheers!

[jalil]

Very awesome Sidebar Menu, but can you help me in how to develop the same with adding a navigation feature by if clicking any menu item, the left part of the page will be refreshed (load contents ) accordingly without refreshing the whole page.

[sseruwagifaishar]

nice video but where did you got or identified class name (active).its like not define in html

[grey-senpai]

Awesome tutorial, one problem though, only li tag can be the direct child of a ul tag, not a div, that was a mistake.

[kelvonpatterson]

How're you putting li's in a div and it shows no error? Mine wont show up as bullets

[aldindelahmet]

nice tutorial! one question: i've put another home icon beside the bar icon and when i scroll over the bar icon with my mouse, my home icon is gets a kind violet color it looks like a hover but i couldnt fix it unfortunetly. any advice? Thanks

[shrey__yt]

I believe the sidebar isn't as simple as this on youtube. When you open the side navbar you can also close it by swiping it from outside. Can you throw more light on how to do this

[motivational-quotes-rk]

Nice one, in entire YouTube,
Can you plz provide me this code by your git ripo

[er_vinod]

#navbar + tab not working... is there any extension for it or any idea

[sujaljaine]

Great tutorial! But, there is something missing. You should provide the source code, dude. Anyways, keep up the unique work.

[parthabiswas]

can anyone tell me what is the name of extension which he is using which colorize the space columns in vs code

[bikramchettri]

hey bro thanks for the tutorial. Can you also do tutorial transparent navbar and smooth scroll to section

[shrg-epco]

I write the same code but JS not working with me not show the nav-menu can you help me please?

[aafaqueahmedshaikh]

Is ki short he kya pc sidebar ki youtube mein