Responsive HTML & CSS Side Menu From Scratch

[@dailywisdom12]

Good afternoon Brad, I'm from South Africa and I've been stuck with 2 hour tutorials that end up leaving my brain, but since watching this, you broke it down, peace by piece and fit all that into a 23 min video! Feels like I learnt it all within a day. And it's only that short time. Thank you so much

[@riaznapa]

Since last April Ive been learning web designing in order to find a job in Germany. I dont have any knowledge in IT neither have I ever learned anything else than basic math. I am still struggling to understand the topic but your channel has become an ispiration for me to keep moving. May Allah reward you!

[@JOSEFRESHSOL]

Brad, you have been a great help for me. The way you explain everything, sinks in. Little things you address such as the reason for a "#" or a "." within CSS are the brain busters because it's hardly mentioned. Those little things along with your extensive knowledge and free videos are crucial to designers like myself learning to transform my PS and IL designs to full fledged websites. Thank you!

[@mirzasisic]

Tutorials on responsiveness done with vanilla css are such a nice refreshment!

[@amazingworld4351]

Yeah Brother you are right

[@amazingworld4351]

Listen Brother are you working on Web development please contact me on WhatsApp no I need your help

[@izackom5202]

Brad teaches programming so well that i relate to him more than my teachers who we interact on a daily basis. Thanks a lot Brad

[@sabertoothwallaby2937]

html and css isn't programming tho???

[@izackom5202]

@@sabertoothwallaby2937 i know. I was mainly referring to his tutorials on vanilla js and php. Damn.....

[@Carl-yu6uw]

Loved this little practical demo highlighting how effective just a little css knowledge can be, no frameworks needed. Much appreciated, thanks Brad.

[@emmanueleze3028]

This is my first time of commenting on this channel since i joined and it will definitely not be my last. Been looking everywhere for a good tutorial on this subject until today. After following every step in this video, all i have to say is that you are the BEST tutor EVER. God bless you!

[@TraversyMedia]

Thanks man, that means a lot :)

[@danieladetayo3711]

Brad for president

[@TraversyMedia]

lol, I would get eaten alive by the partisanship. I believe in listening to both sides and forming an intelligent opinion rather than sticking to a team even if it doesn't make sense. Politicians are morons

[@danieladetayo3711]

Traversy Media lol. That's so true about politicians

[@tusharandriyas6647]

politicians, media, and big corporate houses.....like d cogs of a well oiled ferris wheel.....taking commoners for a hell ride made to look like a joy ride.......nd d oil being corruption......but seriously.....love your videos Brad.

[@dayo2114]

Daniel Ad @

[@dayo2114]

Traversy Media q

[@jenoyestewart1516]

Hey, I'm a beginner, and I have been watching all your videos. I'm thankful for you man. You are a great teacher and I want to say thank you. keep up the good work, I appreciate it.

[@RAZR_Channel]

Your are doing things : Exactly Right... and I'm not talking about CODE. I've been in IT for about 20 years and there are SO Many people that don't know the Basics you are showing in your tutorials. I started learning Atom and ran across your Vids. With the way you think.... I would say your cut out for management and above (if your not already).

[@JP-mu5er]

MAN YOUR A TRUE LEGEND. EASY TO UNDERSTAND EFFICIENT AND CLEAR VOICE!! WHAT A LEGEND MAN, HTML GET SOO MUCH COOLER WHEN YOU EXPLAIN IT! YOU WON A TRUSTFUL SUBSCRIBER!!!

[@FordExplorer-rm6ew]

I like how you preview each part of this. Html5/CSS/Little bit of vanilla JS, for certain components like nav bar etc. . These make the perfect tutorials for practicing fundamentals and actually knowing what's going on.

[@alextheblockchaindev]

Brad explains everything so well, he is a naturally born teacher! It is true he has been teaching for many years and he had time to perfect his methods, but he is definitely one of the best on KZbin! 🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@JohnBeau]

The sidebar has always been something that stumped me, definitely going to be using them now.

[@JonnyBeoulve]

Thanks for leaving in the issue at 10:40. It was good practice to pause the video and try to debug your code.

[@jay3fox]

this was a great tutorial, I am in the middle of doing an End of Module assignment for Uni and this is what I was looking for, thanks!

[@patrickcole1119]

Great video showcasing this technique with CSS! Something I've learned recently that has helped is to adjust the JavaScript code to only add or remove CSS classes from the sidebar and main elements. For example: ... × function openSidebar(){ document.getElementById('main').classList.add("state-open"); } function closeSidebar(){ document.getElementById('main').classList.remove('state-open'); } ----- Stylesheet ---- .side-nav { position: fixed; width: 0; ... } .side-nav.state-open { width: 225px; .... } Your stylesheet can then have all the appropriate style code to adjust the width and have transitions as long as the .state-open class is present on both elements. Removing the "style" from the JavaScript code makes it more responsive. In other words you could have a media query for different device sizes that use the same .state-open class and adjust width accordingly. Just a suggestion on another way to approach this. Keep up the excellent content!

[@hippigypsi]

I cant even keep up with you anymore.. you are on a roll. I have a request for CSS Grid lessons if you find time to put a crash course together.. An in depth series would be even better! Thanks Brad!

[@delsocorromarcdavea.2871]

This shows you that even one of the best programmers in the world is still going to forget a certain code. Face it we're all humans and we all forget something in our lives. Coding is not about memorizing the codes, it's understanding the function of every codes by just practice. "Practice makes perfect".

[@harpreetkaur8806]

Thanks brad ..for teaching informative content. Thnks from the bottom of my heart

[@crocodilecrox3758]

Every single topic you cover brad, is plain awesome content!

[@gabornagy6274]

20:49 these moments makes me smile when you don't cut these happens out of your tutorials. Otherwise you are a magician. The God i chose i believe in.

[@Diplomat82]

I'm currently in a boot camp. Literally, I watch your videos while I'm in class EVERYDAY! Today were doing backend. Nodejs, building a form.

[@TraversyMedia]

Sounds cool. Thanks for watching. How are you liking the bootcamp?

[@Diplomat82]

Well, I didn't have much time to do pre-work, I was working a full-time job. So once I quit my job, I may have had 2 weeks of @freecodecamp and youtube tutorials. I knew it wasn't;t going to be enough. I guess I expected the instructor to go into detail about the basics. So the first 4 weeks have been a blur. Monday we started Backend, Node.js etc. Oh yeah, your Node tutorial saved me. We spent 2 weeks on Javascript maybe. I barely know anything. I plan on watching your Javascript for beginners. I've just come to realize this boot camp is like a stepping stone I guess. I won't come out of here with the expectations I had coming in.

[@TraversyMedia]

Well just try and pace yourself. I guess it's not called a bootcamp for nothing. Take from it what you can and keep learning. Glad I could help

[@Diplomat82]

Yup, that's my goal! I've already sent your link to like 10 people in my class in the last week. Keep the vids coming man.

[@kenilpatel7841]

Even though i do not watch all the videos but i eagerly wait for notifications about uploads from Traversy Media!! Honestly web development seems fun while learning from this channel! Thanx a lot Brad for all these videos...Hoping to see more and more videos from u!!

[@lav5688]

Hey Brad i am really very much thank full, i was literally finding these type of Navbar. Love from India.

[@7skitchen884]

I truly feel like iv'e learned more from watching this video than my first month attending Coding Dojo

[@PierreZaharakisPhotography]

You are awesome . I just discovered you . good job . you are a good teacher

[@miathegaymer]

Instead of using SVG tag, you could use ☰ You could then use font-size to scale it and use color: #fff; to make it white. It runs much faster, and it's much more time-efficient. Hope this helps!

[@bobans]

Very nice and professional intro with the logo. Bought your Full Stack Web Developer from Udemy, and I have to say I have learned a lot. Keep up the good work.

[@garethlansdale6930]

Brad, are You an Angel ?. I Believe So. Thanks .

[@lukeclarke4269]

Hey Brad, your a legend. Thanks for the time you put into making these videos. It means a lot and you have given me inspiration to chase this as a career for me. Ive learnt so much from your videos

[@hishamal-gorashi6164]

For the bigger font size in the editor, Thanks a lot Mr. Brad

[@Dr.Stein99]

Hi. Thanks for writing informative tutorials. I like how you get right to business woth 15 minutes of personal updates and exvuses for not posting. Your narration is perfect too. Voice is easy to understand in English. Your tutorials helped me as existing programmer to learn the specifics to these functions fast, without the fluff. Thank you very much.

[@AdamE2000_]

Im sorry about my comment earlier on, I love your channel. thank you for helping me so much. youve changed your life around

[@tonihamalainen9757]

Doing my best to learn HTML and CSS. I have to admit that these videos help a lot!

[@misterz5908]

Thanks a lot man it means a lot to us! We all are looking forward to see more content like this!

[@sugarcaneross]

This was excellent, Brad! You should definitely do more livecoding-type videos like this, in addition to your great slideshow explanations.

[@tangeric]

Love your videos! Whenever I'm searching for something and I see your logo, I'm like "Yes! Jackpot!"... Lol

[@davidjackson148]

This is awesome, just dropped straight into my project. I was going to do one myself but this has saved me a ton of work. Just got to move it from the left side to the right side. Thanks loads buddy.

[@WILDWILLXD]

Thank you for another great video! I don't care if it's 3 years old, it's timeless!

[@Z3r0M1st]

Thank you @Traversy Media you make understanding HTML and CSS easy to understand keep putting out content like this with this quality.

[@birsingh5388]

One word I can say for Brad. He is greatest. Thank you very much.

[@eric7758]

The Real mvp is Brad. Respect bruh

[@noahjwhitmore]

Just for kicks - An alternative to make the svg button show only on small screens without adding an extra media query... TLDR - Set the svg button (.open-slide) to display:none by default, then make it display:block in your one media query To make your svg button hidden by default, don't add a second media query. Outside of your media quesry, after your .navbar styles, just add .open-slide { display:none; } Then, in your @media(max-width:568px), add .open-slide { display:block; } The way that Brad did it works the same, I'm not saying it's wrong to add a second media query. Just up to your preference, I guess.

[@matt52636]

Great tutorial im 13 and you have managed to explain it perfectly :D

[@jabbikawsu6443]

nice one love it

[@dalemoayokunle7330]

John Paguirigan 🤣🤣🤣🤣🤣

[@matt52636]

@John Paguirigan Hahahaha!

[@Welcometomyjourney20]

Awesome. Small hint: instead of using svg, there's hamburger menu in html entity.. it's faster & saving some codes :)

[@IsaacAsante17]

Amazing video as always. Do you get all these tutorial ideas yourself?

[@JoeBob79569]

17:42 I think underlines, and all the other "fancy" stuff such as header sizes, are this way so that people with no knowledge of CSS could create a basic webpage. And their links will look like links, headers-> headers etc. Or maybe in case your stylesheet doesn't load. Or maybe so that you can see what's what before you style everything. Still pretty annoying having to change it every time though..

[@DivineJesusPrayers]

@Brad, You are an awesome teacher period!!! Your intimate mastery of the concepts you teach and the manner you convey them is truly a breath of fresh air! I have learnt a lot from you ... all i can say is - " You are truly a blessing to mankind!!! " Thank You Sir!!!

[@VinhLe-gc8ws]

I'm a no frills no framewrok kinda guy, and just learning! More vanilla tutorials please!

[@Assburgersaretasty]

navbahhhh. I love you easy coasters, lots of friends out there. thank you for more content that is always helpful

[@IlemonaJamesAtuluku]

Once is from Brad is a must watch

[@joel9909]

so if the video says Brad, You first like, then comment then watch then come back and say thank you again. Thanks for the image slider video Brad it was amazing

[@larrymccall5838]

Great presentation. Clear concise and to the point.

[@automation_jeff]

nice job Brad - low key, kept it simple, good explanations along every step of the way.

[@DMurphyGonzalez]

Awesome instruction. I really need to brush up on my html. This looks great!

[@mohammedmustafa9115]

thank you from Egypt this is the easiest and smoothest Slide out menu tutorial i've watched

[@anselminos5238]

its because the tag is for links and is for writing paragraphs

[@pianoLee-sx9dx]

I am just wondering why are the list styles under the ul section and not li? I tried to add a drop down menu here but for some reason, it then stops behaving as it should....

[@benjaminwolke9280]

As always a great tutorial, thanks for that! Just a hint, what might work better: The min-width (for the hidden slide) should be 1 pixel more than the max-width entry (for the hidden nav-bar), else you would show none of them, if the width is exactly 568px.

[@davidjackson4642]

A couple of questions. 1) Is it possible to have the sidebar menu always visible if the screen is wide enough to show it? 2) Can the x close button be removed from the sidebar menu and selecting a sidebar menu item closes the sidebar on mobile screens? 3) Is it possible that a click / press on the main panel closes the sidebar menu on the mobile screen?

[@finnn_800]

I don't understand how changing padding to margin at 20:59 would have any effects on the position of the links. Can anybody explain it to me? thanks

[@JamesQQuick]

Love it. Thanks as always!

[@PHInfo]

Wow!. I'm very glad to find your channel. Your videos taught me a lot. Thanks.

[@mza1409]

A true brogrammer ♥

[@TraversyMedia]

hahaha :)

[@sivnfrens]

brogrammer :) good name, totally going to use it, thanks

[@Mr.Existence]

brogrammar* nazi

[@benjaminmartin7702]

@@TraversyMedia sorry just a question: why my xclose btn, doesn't close when I click on it?

[@priyanzhu]

@@benjaminmartin7702 you gotta debug

[@hwdrift]

Good to see you Brad :)

[@jokestream17]

This channel has become one of my favorite tutorial channels in the past few months. Thank you very much for making these videos. By the way, if you don't mind me asking... do you know AWS?? I mean can you do a tutorial series on it?

[@eddieantar6958]

I like the new Traversy Media logo

[@tomino133]

You Sir, are an absolute legend. Thanks for doing these ! :)

[@oakharborwebdesigns5169]

Hey, so how do we do this same process, but have the side navigation pop up out of the right side instead of the left? I'm having trouble figuring that out

[@francissicnarf4707]

19:20 why margin-left is added on .btn-close? removing it stays the same

[@jaerroyal]

you just made my life a whole lot happier lol

[@osempo]

Very cool tutorials you have, i'm a subscriber right now!

[@Joaconstrictor]

So glad I found your channel. Thanks for another great video.

[@2002budokan]

Brad, how can we make the sidebar scrollable when it's content exceeds the screen width?

[@firezdog]

Very nice. I feel like the transition effect could be a little smoother, however. Not sure how you would fix that.

[@wademorris1276]

Question, how to make your mobile menu slide from the top or from the bottom instead of the side?

[@dinozaurpickupline4221]

Hi I m looking to make the wobble effect in the sidebar menu when we hover it cascades to the right How can we do that?please

[@nickwoodward819]

don't suppose you know why the text in my menu is staggering in? (as in it's very briefly on two lines as the menu slides in, then it's on one)

[@lakmalsampath3753]

The best programmer i ever seen.

[@bebesluckyhuman8327]

Loved this, thank you! I am just beginning JS and the little bit of JS in this got me so excited.

[@jaredschroeder5353]

Having some trouble with the SVG hamburger thing. When I write the same code as he wrote all three lines appear on top of each other instead of in three rows. Any solutions?

[@ashirafzal6771]

One of the best tutorials I have found thanks man ❤

[@DrExpresso]

Will you do a java tutorial?

[@TraversyMedia]

Planning on it...just need to do a bit more studying to be able to do a crash course

[@bg73]

You should make a video on how to set up Atom with all the best plug-ins etc. and then you can just refer to it at the beginning of your videos

[@TraversyMedia]

Already on it :) expect it in the next couple weeks

[@damilareemmanuel]

I will be expecting that. Really

[@Grewal0007]

Also tell us the "Shortcut keywords" of atom in windows

[@stefanclarke33]

Any idea as to why my "svg" tags and everything within is not highlighted like the rest of my code?

[@oscar51290]

Trying to implement this particular solution for a real project. Encountered this issue: This side menu in conjunction with sticky header, and on a page longer (height wise) than a screen, leads to the page scrolling all the way to the top after clicking on "open slide" button. Edit: Got it. Just do not use tags for "open-slide" and "close-slide" buttons. Or at least delete href="#" attribute.

[@saminengkong6204]

Brad save my thesis, thank you so much man

[@_Apex]

hey brad absolutely love all of your videos they truly helped me a lot. I was wondering if you could save the file after every line so we could see a live update of what each new addition does

[@applesauce1135]

New to the channel and to the content, trying to absorb as much as possible. Quick question if you're still replying to these. How would one go about tweaking this so that the current page is pushed aside when opening the side menu, and back when closed instead of floating on top? Is it possible to achieve with just html and css or is javascript required? Thanks!

[@nicolaijuulsager3401]

Hi Brad. Thx for your help - it works perfectly! But I want to hear if its possible to place the side-bar icon to the right. I know how to move the sidebar to the right, but not the icon.

[@maca.valverde]

Excellent video, it help me a lot, thanks♥

[@LinardsBerzins]

heyyyy, the putting the voice to the face :) cool to meet you mate

[@taariqq]

Only 360p res?

[@TraversyMedia]

Its still processing

[@amandang2533]

Great Video Brad. Just one question, is there a way to make this kind of navbar with just a single set of links rather than having to maintain them in two spots?

[@viralpatel1522]

Was just making this thing. Thank you for the upload. Will be a great help now. Also that intro audio is amazing. Sir can you up the quality. I cannot make it more than 360

[@viralpatel1522]

working good now. :D

[@TraversyMedia]

Yeah KZbin was still processing. Takes about 5 mins after upload usually

[@sibghatullah6840]

Thanks your all tutorials are awesome and they help a lot

[@FutureAIDev2015]

Nice and easy to follow along! I like how you explained every step too.

[@gabe.design]

Noob question. If .btn-close’s position was set to absolute (top: 0, right: 22px), what’s the need for margin-left: 50px? And shouldn’t the ‘X’ be at the top edge?

[@odunladeoluwaseun7880]

please can you do something on creating simple 3 page php template?

[@iTomAnks]

Your videos are amazing, thanks for taking the time to make them

[@MrRight1000]

SVG: When I changed stoke-width to 10 - it didn't take an effect.