How to make a responsive navbar with react js and tailwind css | React js and tailwind css tutorial

[@axeld.santacruz4659]

After watching this, I'm happy to live as a backend dev hehe.
Great tutorial, finally someone with good front content :D Keep up the good work!

[@justasydefix6251]

Your code choice of syntax indicates that you are experienced at this. Your theme choices are also excellent. Thanks for your work and for sharing it

[@allanfernz9356]

Thank you for this, It never struck me to just have the menu items as a JSON object, my header files look soo much cleaner now! Cheers!

[@algocodes]

I like how quick and simple you make your videos i will take that into note!

[@CodeAProgram]

Share and subscribe ❤️

[@Vasmir5]

Excellent. You have solved my problem😅 and earned a subscription. Thank you.😊

[@skverskk]

Neat, simple and concise, Excellent!

[@iarlensantos3588]

Thank you! I before did doing two navigation, a to mobile and tablet, other to desktop.

[@yuliaa.4741]

Thank you so much, I will be looking forward to your new tutorials!

[@CodeAProgram]

☺️☺️😁

[@mdanas0007]

Great share man very simple and on point i have used it in my amazon clone project for mobile responsive.

[@4surajgo]

Best and concise tutorial for responsive nav

[@CodeAProgram]

Thank you so much😀

[@polasamy9699]

Amazing, thank you so much!

[@magicnightcn]

Good and clear! Thanks.

[@CodeAProgram]

Welcome

[@LuisEnriqueReyesGonzalez]

great! supongo que es cuestión de practica, por ahora siento que me confundo mas con tailwind que con el css3 puro 😅 a seguir practicando!

[@allistermugaisi1625]

Great video. Excellent

[@CodeAProgram]

Share and subscribe for more

[@DuminoreDev]

Awesome, thank you!

Excellent video!

[@myself_ripon]

Thank you so much 😍😍 So Straight Forward Solution🤩🤩💞

[@igoraguiar00]

great video!

[@CodeAProgram]

Thanks ❤️

[@igoraguiar00]

@@CodeAProgram I subscribed after this video, I like videos there are straight to the point and no talking !

[@Projectspersonal]

Thanks bro ,These video really helped me .

[@thaqifazfar]

Thanks sir for this tutorial!

[@CodeAProgram]

Welcome

[@CodeAProgram]

Welcome

[@rafayzia4180]

Thank you so much ! concise and clear

[@CodeAProgram]

Welcome

[@erykzong]

woow it´s so cool I learned a lot with your video

[@CodeAProgram]

Share and subscribe ❤️

[@erykzong]

@@CodeAProgram of course

[@shubhamyadav2716]

Thanku man u solved a big problem for me!!!!!!!!!!!!!!!!!!!!!!! u could have used hidden and block istead of giving top-20 and top-490

[@mustafazaidani5592]

He did this to add a sliding-down animation effect to the menu when it is opened

[@theoretisch]

So clean, thank you so much :))))

[@CodeAProgram]

Share and subscribe

[@8koi245]

you actually did it! insta sub

[@rodolfodeveloper]

Excellent!

[@CodeAProgram]

Please share and subscribe for more!

[@qwesicodes]

Thanks man! 👌👌💻💻

[@1982imran]

Good Video...Thanks for help

[@CodeAProgram]

Share and subscribe ❤️😉

[@akashpawar8618]

Thanks 👍🙏

[@FavourMbata-dp9yu]

Thank you so much for this

[@mohitkumardash888]

Thank you. Great tutorial !

[@CodeAProgram]

Welcome 😀😀

[@queenmolokwu3068]

Thanks so much 😊

[@emambokhari8380]

Thanks a lot, many many thanks sir

[@atulkumar_zip]

Nice ❤❤❤

[@darivadeneyra]

Thanks men!

[@danielddungu]

Does this work with the new react-router-dom version "^6.2.1"

[@CodeAProgram]

It will work..

[@whatsappme6917]

please how did you implement it with react router i've being trying it for days now it isnt working

[@whatsappme6917]

@@CodeAProgram please can you show me how you implemented it with react router

[@0xredpill]

Thanks a lot sir

[@CodeAProgram]

Share and subscribe 👍

[@avalanche-arabic]

Great job! Thanks for the video, i am having a small issue here, i got the navbar working as a charm, the only issue the content i added after the navbar is being displayed at the top of the page and getting hidden by the navbar, tried to find the issue but no success, any ideas? Thanks!

[@avalanche-arabic]

When i added a mt-40 to my content i see it displayed and the scroll bar appear, so looks really the content was rendered at the top of the page, like the navbar was not there

[@CodeAProgram]

I think that may be z-index problem.
Z-[999] add this code in navbar

[@killer482371]

@@CodeAProgram I’m having that same issue. Where do you add the z index?

[@roddy_21_25]

Thanks : )

[@igoraguiar00]

I have a question: How can I make the containers go under of the NavBar? Everytime I try to put a div it goes either on top or behind the navbar, never under. Thank you !!

[@igoraguiar00]

I fixed myself removing fixed from the navbar and also removing de z-[-1] from the ul element ! The sad part is that I dont have a fixed navbar anymore

[@igoraguiar00]

update: sticky top-0 to Navbar solved al the issues :)

[@mohammadshariarparvez669]

best one broo

[@tanoryjakaperdana1419]

Sir.. how to prevent tab index when !open

[@manojgmanojg9600]

Bro How to link other pages like about, service it's not working while clicking on link.

[@Jesusb.fit20]

the best!!!!

[@justhooman4682]

thanks!

[@CodeAProgram]

Share and subscribe 😀😀

[@nokibulalam7804]

Brother I am having problem with this Navbar. The Items is not showing in the NavBar. Can you help me? I am new in tailwind css

[@CodeAProgram]

[e-mail]
Share your code

[@awaphics]

could you plz make this Nav With a Dependent Dropdown

[@CodeAProgram]

th-cam.com/video/JEV7WE0UBiQ/w-d-xo.html

[@md.asraful2326]

Music name please

[@wassup102]

thanks sir

[@CodeAProgram]

Share and subscribe ❤️

[@ShoibalDas-iz6lc]

Brother I am having an issue can you help me?

[@CodeAProgram]

Support [e-mail]

[@ShoibalDas-iz6lc]

@@CodeAProgram I have sent an email. Please check....

[@ricardootalora6247]

I can't scroll the navbar in landscape mode, how can I fix that?

[@CodeAProgram]

position fixed top-0

[@ricardootalora6247]

Thanks this works for me

[@Omar45]

Thanks alot

[@CodeAProgram]

Share and subscribe ❤️

[@kanchevveselin]

Ok, and where is the Tailwindcss in this project?? If you look carefully at the packege.json "bootstrap": "^4.1.1" When you copy and paste some project first you have to confirm what is inside.

[@CodeAProgram]

Yes, I am installed the bootstrap in the project, but I will create this Navbar using tailwind css only. I am not use the bootstrap classes in this navbar

[@kanchevveselin]

​@@CodeAProgram Apologize for this mess. After review, I find inside the index.html file the CDN Tailwindcss link. I just skipped the video and get the code from Github. Anyway, apologies and happy coding.

[@truongphan4904]

😍

[@CodeAProgram]

Share and subscribe

[@charbouy]

7:38

[@Emilianeitor2000]

Entre buscando un diseño para navbar y alle una solución a mis links de un proyecto XD

[@Collins01]

Google content, thanks

[@zaidtehsin7096]

Good but ionic is no longer free!

[@AugustoBerezowski]

it was what i was looking for, tks

[@CodeAProgram]

Welcome

[@islamicpoint__]

Thank you soo much ❤❤❤

[@_B_MDEKTIARHOSSEN]

thank you so much

[@HuyTran-fl4ej]

thanks so much

[@CodeAProgram]

Share and subscribe ❤️

[@tenebrae1191]

👏👏