How to build a Responsive Navbar in 7 mins - Using React and TailwindCSS

Поделиться
HTML-код
  • Опубликовано: 4 май 2023
  • A quick video about building a fully responsive Navbar using Tailwind and React.js
    - Link to the GitHub project: github.com/rajeshbabu-oviva/r...
    - Link to my online-shop: getyourfckingsocks.com
    - Link to my personal-portfolio: rajeshdavidbabu.com
    Music from #Uppbeat (free for Creators!):
    uppbeat.io/t/yasumu/blue-waters
    License code: MLM8SW8SZUBTM50O
  • НаукаНаука

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

  • @MrItzreal
    @MrItzreal Месяц назад +3

    Straight to the point! No bs! No clickbait! Kept his word and wrapped everything in under 7 minutes.

  • @mdbdrrhm
    @mdbdrrhm 6 месяцев назад +2

    Great Job! Thanks for sharing your code and how it is done with Tailwind CSS.

  • @tirthadeva_yoga
    @tirthadeva_yoga 2 месяца назад +1

    Thank you very much, bro! You are really helped me.
    Namaste from Russia!

  • @kaiserz3843
    @kaiserz3843 5 месяцев назад +1

    Thankyou so much man! just started learning and u helped me ;D

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

    Thanks a lot Raj!

  • @lillyr.9139
    @lillyr.9139 Год назад +1

    So good!!!

  • @jesusre8495
    @jesusre8495 9 месяцев назад +1

    Excelente, muchas gracias!

  • @demmycode
    @demmycode 7 месяцев назад +1

    thanks it was helpful and clean code structure

  • @YangoMangoHD
    @YangoMangoHD 9 месяцев назад +2

    Not one to normally comment but thank you so much! Building a hamburger menu for the first time and all other videos were upwards of 15 minutes. Thanks for making it short, concise and to the point 🙏

  • @user-rs9ov6qs7v
    @user-rs9ov6qs7v 5 месяцев назад +1

    thanks, keep it up brotehr

  • @buhito23
    @buhito23 6 месяцев назад +2

    A tip if you are going to use the editor with limited width to display the browser, try to use the line wrap in the editor and reduce a little bit the typography since you make changes and it gets lost where you modify because of the width of the editor.

  • @thivatutorials4040
    @thivatutorials4040 5 месяцев назад +1

    super bro

  • @stewartbatallasminda4024
    @stewartbatallasminda4024 Год назад +1

    so useful!

  • @book2nez500
    @book2nez500 7 месяцев назад +1

    Thank you
    I just subscribed

  • @sciencekesadhan1107
    @sciencekesadhan1107 Месяц назад

    ghood job...

  • @demmycode
    @demmycode 6 месяцев назад +1

    Hi raj could you please make how to set up sass in next js project please I tried and I couldn't get it I also read the docs still same

  • @sciencekesadhan1107
    @sciencekesadhan1107 Месяц назад

    waah ji waah

  • @sciencekesadhan1107
    @sciencekesadhan1107 Месяц назад

    bro..............goood

  • @ericksegura478
    @ericksegura478 6 месяцев назад +1

    Muchas gracias

  • @Aditya27890
    @Aditya27890 4 месяца назад +4

    But how navbar is opening smoothly

  • @baraa7869
    @baraa7869 Месяц назад +1

    but there is a small bug, when isOpen is true and you expand the screen, the vertical nav links are still visible over the horizontal one

  • @adrianjuarez3754
    @adrianjuarez3754 4 месяца назад +1

    Nice

  • @sciencekesadhan1107
    @sciencekesadhan1107 Месяц назад

    love you...

  • @krzysztofrozbicki1776
    @krzysztofrozbicki1776 10 месяцев назад

    Ahhh i miss the part where you would be explaining the line 5 of code with activeStateCallback - that suddenly appears without any explanations. I was just searching web on how is the easiest way to implement tailwind into isActive default class for Navlink. But not here :(

  • @Nirusvlogs
    @Nirusvlogs Год назад +1

    Thanks for menu. How to fix content without moving down. Menu over lay top of content

  • @NotWorkingChannel-dq7rn
    @NotWorkingChannel-dq7rn 14 дней назад

    When i try to follow i receive a destructure error when i try to use NavLink.
    TypeError: Cannot destructure property 'future' of 'React.useContext(...)' as it is null.
    The above error occurred in the component
    For what reason would this error affect me when during the video, this did not happen to you?

  • @serxsux9170
    @serxsux9170 2 месяца назад +1

    thank you so much! How do you make the dark mode button outside the drop-down menu in responsive mode? as it appears at the beginning of the video, I have tried to do that but it doesn't work

    • @raj_talks_tech
      @raj_talks_tech  2 месяца назад +1

      Oh that is a remix logic I made another video about it called "dark-mode in Remix", I think you can also use next-themes for that if you are using next.js

    • @serxsux9170
      @serxsux9170 2 месяца назад

      @@raj_talks_tech Thank you, can you bring this same code to Astro 4?

  • @ilyas_babu
    @ilyas_babu 10 месяцев назад

    How to add animation on toggle menu

  • @jalexba
    @jalexba 4 месяца назад +1

    what about if you made a fullstack tutorial with remix.. maybe a MERN sack or something like that?

    • @raj_talks_tech
      @raj_talks_tech  4 месяца назад

      There is a fullstack remix tutorial that I have made btw :) check out my channel

  • @sciencekesadhan1107
    @sciencekesadhan1107 Месяц назад +1

    Bro while typing plzzz zoom the screen plzzzzzzzzzzzzzz

  • @rahberhossain4010
    @rahberhossain4010 12 дней назад

    It maybe only be in my project but i think the styles are not exactly as they should be as seen in the video

  • @sciencekesadhan1107
    @sciencekesadhan1107 Месяц назад

    hey bro ............

  • @sciencekesadhan1107
    @sciencekesadhan1107 Месяц назад

    kabhi hindi me kar liya

  • @mirjalol49
    @mirjalol49 2 месяца назад +1

    didnt get a shit, sorry

    • @raj_talks_tech
      @raj_talks_tech  2 месяца назад

      Sorry for that. What could've been done better ?