🔴 Responsive Navigation Bar using Nextjs & TailwindCSS from scratch.
HTML-код
- Опубликовано: 2 июн 2024
- Absolute beginner Responsive NavigationBar with Next.js & TailwindCSS from scratch. Also, we talked about the simple approach of making Nav with some 3rd party packages for smoothness between the tabs. In this, we also look at the toggle functionality between the mobile and web.
🖋 Source Code - github.com/Streamline6/Naviga...
✔ Subscribe for new videos every week - / @streamline13
🕟 TimeStamps
00:00 Introduction
00:13 Overview of the project
01:00 Create project
04:54 Install Tailwindcss in project
07:00 Install packages
36:33 HeroSection
Tools used in this video
Canva (for graphics)- www.canva.com
Vedio Editor - imovie
❤ Stay Connected
linktr.ee/Streamline6
Follow me on Twitter:
/ stream_line6
Please do leave a like and Subscribe to stay updated drop a comment and share if you liked it. 👍
great job man .... thanks
Good video!
Thank you sir so much for your time and for this awesome tutorial
Glad you liked it! :)
very very good video. I liked.
Thank you very much! :)
wow ! i like the way you present thing .. Nice tutorial man
Glad it was helpful! :)
So good
thanks man 😊
what if use Link from next/link?
Idk if I missed something but on mobile the links are not opening when I click on the toggle button (The icon is changing tho)
Yes, because this code work on the previous version of Tailwindcss. For the Newer version, you can watch my Responsive agency website video (Navbar Section).
ruclips.net/video/0AmbHydAH20/видео.html
@@Streamline13 Oh thanks a lot !
For those having the following error after creating the navbar component: "Unexpected ref object provided for div. Use either a ref-setter function or React.createRef()."
Create a ref const before your return statement like this:
const ref=React.createRef();
then just replace the function (ref)=> on the div element like this:
Dude how did you fix it?
Is this method valid in next js !!
He is cutting videos in errors
Not good
Functionality not working! Fake video ! Total time waste
Due to the version upgrade by TailwindCSS, this functionality is not working on V3.0.0+. This piece of code works on the previous version of TailwindCSS but if you want newer toggle functionality you may check my side-navbar tutorial it might help you with your project.
ruclips.net/video/wUMrXQaCj0Y/видео.html