Responsive Navbar Tutorial In ReactJS

In this video I will teach you guys how to make a responsive Navbar using ReactJS. We will not use any library, it will be pure react and css. We also use Material UI Icons for the icons.
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
Please leave a comment on what topic you guys want me to cover next!
-
❤️ Support the Channel: / pedrotech
📞 Tutoring Session: www.fiverr.com...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: [e-mail]
Tags:
Responsive Navbar
Fetch
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial

[@INfoUpgraders]

Being a full-stack dev, one of my most challenging things with frontend believe it or not, is that navbar.

[@PedroTechnologies]

I relate 100% hahaha

[@ahmedmelfay]

Totally agree

[@fahisrahman]

💯

[@obinnailoanya8730]

I agree with you

[@leomacdon7858]

Thank you Pedro, your tutorial helps me and I really appreciate you. I was stuck but when I watch this , it helps what I was struggling for.. Great tut 👍

[@df3ink]

Excellent video! I've been searching for a bit on a tutorial like this that was easy to do and well explained. Found both here! Great work!

[@PedroTechnologies]

Glad it helped!

[@CourageousCreatives]

I just completed this and now have a responsive navbar! New to all this and was curious if you had a tutorial on a drop down option for one of the menu items? I'll be looking around for that next :) Thank you so much! I also grabbed your authentication code and am working on that. Thank you, thank you!

[@PedroTechnologies]

Awesome!! I don't have a dropdown tutorial, but I can defo do one! Good luck in ur coding journey!

[@junjietan2668]

That’s is amazing content about the responsive nav bar. Absolutely thumbs up for it. Easy and clear rather than using bootstrap/other layout design even though it has developed by the community. Keep the good work pedro!

[@PedroTechnologies]

Thank you so much! Really appreciate your supportive comment!

[@uggghhhh835]

This tutorial is excellent. I was looking for something easy to follow and your video is perfect. Thank you!

[@seanmelodi]

Thanks, @PedroTech. This video really helpt me out 👍 Was stuck with my navbar for one day until I found your video, solved it in 30 mins. 😁

[@PedroTechnologies]

Hahaha I am glad it helped! Good luck!

[@seanmelodi]

@@PedroTechnologies I almost started to cry 🤣 Never thought it would be that hard to create a responsive navbar, without creating 2 separate navbars for mobile and desktop/tablets. Thanks for your time, and you now have a new sub 😃💯

[@virtualshivam]

Most impressive thing is that you have excellent teaching skills, Understood this is just one go.This helped me a lot. Thank you so much :). Hope you will soon make complete series on React

[@PedroTechnologies]

Thank you so much! I really appreciate the support, I love teaching but I am still learning. I will definitely make a react series!

[@ndahayokevin7626]

Pedro is one of Tech youtubers that I admire much

[@rafaelalexandre9045]

Suas pausas com "éééé" entregam que é brasileiro hahaha. Valeu pelo vídeo e ótimo inglês também!

[@PedroTechnologies]

KKkkkkkk obrigado mano!

[@jcbnesh]

You Are Awesome Bro.This Video Is Very Helpful for Me.Your Channel Has Great Videos.Thanks A lot

[@domenicocucinotta2720]

Amazing tutorial man, just what I needed! Looking forward for.more content!

[@mkannan5157]

Thanks, dude. Very informative and helped me with my stuff. Luckily, I didn't get the source from your Github and so watched the full video :) Keep it up !!

[@PedroTechnologies]

Glad you liked it! I screwed up and deleted my repo hahaha but glad you got it to work!

[@codefingers8957]

Really grateful to you this did help me out!!

[@PedroTechnologies]

Thank you!

[@whoIsDeck]

Great work bro i was pissed of my code but yours is cleaner :)

[@PedroTechnologies]

Thakn you! Glad you liked the video!

[@simoneraso556]

Very good tutorial Pedro. Thank you!

[@wictortec5627]

Your videos is amazing, thanks Pedro.

[@jacksonvaldez5911]

Thank you so much. This was so darn helpful. Subbed!

[@soldishero_YY]

Thank you for the lesson!

[@b.i.p165]

Thank you! This is just what I need!

[@k303k]

thanks for the video pedro!

[@marypaul9627]

very good one my icons didnt show says the material ui yet i npm installled it...but everything else worked fine i enjoyed the video

[@madurangavimukthi]

Thanks for clear explenation

[@PedroTechnologies]

Glad it was helpful!

[@ironhunter2219]

Hello, great content as always. Quick question, how can I have the current link highlighted in the navbar or have it a different color. For example, if I am on the About us page, I want it to be blue in the navbar

[@MegaArmien]

I love your videos , mate . Keep going.

[@PedroTechnologies]

Thanks a lot! I appreciate it!

[@igorgorbatovskiy4836]

Great job! Thank you!

[@zakirashid4375]

Good job Sir Pedro !

[@paultopham81]

great vid, not long winded like others! 👍

[@PedroTechnologies]

Thank you! Glad you liked it!

[@mariynakircheva7113]

cool bro, very education, ty

[@PedroTechnologies]

Glad you enjoyed it

[@tsdineshjai8565]

Thanks a lot for the Video Pedro :)

[@lucasmaranhao3789]

Thank you. your english is understandable kkkkkkk. Congratulations

[@akashshrestha01]

great

[@nicolindenau3349]

hey do you know how i can add a smooth transition when i click the botton so the bar ease in and out by clicking the button?

[@codito7388]

Nice. What program you use for editing photos banner?

[@PedroTechnologies]

Thank you! I use photoshop!

[@harshupadhyay6130]

Thank you so much for your help

[@PedroTechnologies]

Thank you for watching!

[@josephyekini4937]

Can you make a continuation of the video where there is a drop down

[@ashikmuhammed8198]

Thank you sir ❤️

[@laughAFrame]

when i write @media only screen and (max-width:800px) { .app{ display:none;} } it doesn't happen on screen size of 800px, it actually happens when the screen size gets to 500px. why does that happen? this only happens in the react projects. can you help me with this. Looks like it also happened in your tutorial too. you can see the media query works on the screen size that is less than the max-width given in the css.

[@PedroTechnologies]

Hi, issues regarding media query is usually because two sizes collide. For example, if you have a media query for a size smaller than 800 that exists above the one for 800, then it will usually not work.

[@laughAFrame]

@@PedroTechnologies the media query works fine outside the react app. But it doesn't work in the app that I am working. Suppose I give a max-width of 800px,. A certain div has to disappear on 800px or below but it actually disappears whe the screen gets to 500px. I mean 300px are ignored

[@nurlanmehdiyev7428]

Thant you very much!

[@hiromijorge400]

hi bro thanks for the tutorial, but i want to know how we can add a transition when the link is open when the button is clicked and also when the link is closed?? thankyou.

[@maximilianorogers8477]

Very nice! Could you make a redux tutorial? I only know a little of redux, great content!

[@PedroTechnologies]

Hi, thank you! I actually don't use redux for state management, I prefer the Context API, so I don't know how to use redux, sorry bout that!

[@laxmangiri5511]

love youu mann

[@PedroTechnologies]

lmaoo glad you liked it!

[@laxmangiri5511]

@@PedroTechnologies ya bro i loved it

[@nickjohnson4745]

I noticed a bug in this, or at least when I built it I got this bug. If you open the nav drop down and then expand the screen, it keeps the drop down open even when you reach bigger screens because the isHidden state was never toggled off with a click.

[@eduardonoronha3663]

So Good!

[@toufikmouhmouh5695]

helpful thank you

[@codegate615]

do you have a vid on media queries?

[@basterbuddy2769]

How can I make the transition smooth instead of at an instant?

[@marypaul9627]

just subscribed

[@jurgensubat2827]

That was easy to learn. Thank you very much but I have one question. As soon as I click on one of my links the menu doesn't disappear. Only after another click of the button hide the navigation. I tried something without any success. Do you can tell me where I need to optimize my code?

[@projectbasedcoding]

You can add the onclick logic to the links as well. So they will also change the state

[@wildbarbarianofthefuture8925]

hello where can i look at the code

[@quickTravel]

Great...Would be better if you include a logo in design...cause without a logo no website is exist..

[@yasseelle]

great video great content keep forward

[@PedroTechnologies]

Thank you! Really appreciate it!

[@softblood1941]

How can i write this as react module id={showLinks ? "hidden" : " " } like that: import styles from '../vnav.module.css'

[@PedroTechnologies]

Well, for that you would have to be accessing the state in the module, so you would have to do that in some way (either props or global states). I honestly advise using either css files or a library like styled-components

[@softblood1941]

@@PedroTechnologies OK thanks for the advice.

[@simranbanwait]

Nice

[@irocksobad101]

tutorial starts at 17:20

[@mohamadsokhango7202]

The best🦸‍♂️

[@fuadyanwar4930]

Wow thankyou so much. I'm dying try to figure out why my burger button not works. Its use state😭

[@akashshrestha01]

what about using rem

[@digitalhdr7768]

nice

[@GustavoWalienDev]

Hey man do you have this code on gtihub?

[@maodigitalsolutionwebsited8834]

@pedro tech, where is the code?

[@smurfaccount9192]

@media query is not working at all

[@securitytechtalk]

I want three sections into navbar

[@akashshrestha01]

codes repo link?

[@preethigunda9648]

i am getting errors