🔴 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. 👍

Комментарии • 21

  • @abdulwahed.mansour
    @abdulwahed.mansour 2 года назад

    great job man .... thanks

  • @emmanuelfabiani8435
    @emmanuelfabiani8435 2 года назад

    Good video!

  • @laachariabdelhaq4435
    @laachariabdelhaq4435 Год назад

    Thank you sir so much for your time and for this awesome tutorial

  • @criancasanimated6253
    @criancasanimated6253 Год назад

    very very good video. I liked.

  • @herzolyrics
    @herzolyrics Год назад

    wow ! i like the way you present thing .. Nice tutorial man

  • @ercanvarol92
    @ercanvarol92 2 года назад

    So good

  • @angga6008
    @angga6008 Год назад

    what if use Link from next/link?

  • @kentay4460
    @kentay4460 2 года назад

    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)

    • @Streamline13
      @Streamline13  2 года назад +1

      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

    • @kentay4460
      @kentay4460 2 года назад

      @@Streamline13 Oh thanks a lot !

  • @emmanuelfabiani8435
    @emmanuelfabiani8435 2 года назад +1

    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:

    • @juancoding
      @juancoding 2 года назад

      Dude how did you fix it?

    • @abakir1
      @abakir1 2 года назад

      Is this method valid in next js !!

  • @thesmartideas4246
    @thesmartideas4246 2 года назад

    He is cutting videos in errors

  • @thesmartideas4246
    @thesmartideas4246 2 года назад +1

    Not good

  • @skillmentor485
    @skillmentor485 Год назад

    Functionality not working! Fake video ! Total time waste

    • @Streamline13
      @Streamline13  Год назад

      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