How to Create Responsive Navigation Bar With HTML & CSS in Hindi

Поделиться
HTML-код
  • Опубликовано: 31 май 2024
  • How to Create Responsive Navigation Bar in HTML and CSS | Navbar using HTML CSS
    In this video, I have created a Fully Responsive Navigation or Navbar Menu in Hindi language. I hope you will like this Responsive Navigation Bar. Feel free to download the source code file of this Navigation Menu from the given link.
    ----
    Hire us on Fiverr
    ➤ www.fiverr.com/prakashahi
    📁 Download Source Code Form Here
    ➤ www.codingnepalweb.com/respon...
    Follow me on Instagram
    ➤ / coding.np
    ---
    Timestamp:
    00:00 Navigation Bar Intro and Demo
    02:44 HTML Code for Navigation Menu
    03:45 CSS Code for Responsive Navbar
    10:10 Media query Code for Responsive
    19:08 Final Output of Navigation Bar Menu
    #ResponsiveNavbar
    #NavigationMenuBar
    #ResponsiveMenu
    #ResponsiveNavbar
    #ResponsiveMenuBar
    #HTMLCSS
    ----
    Music Credit:
    Levianth & Axol - Remember (feat. The Tech Thieves) [NCS Release]
    Music provided by NoCopyrightSounds.
    ➤ Watch: • Levianth & Axol - Reme...
    ---
    Keywords:
    responsive navigation menu using html and css,
    responsive navbar using only html and css,
    how to make responsive navigation bar in html and css,
    how to make responsive navigation bar,
    how to make responsive navigation bar in html and css in hindi,
    how to make navigation bar in html and css,
    responsive navigation bar with,
    responsive navigation bar with html and css,
    navigation bar in html and css,
    navigation bar in html and css responsive,
    responsive navbar html css,
    css navigation

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

  • @CodingLabYT
    @CodingLabYT  3 года назад +28

    How To Create Simple Website Simple Website.

    • @suraj351
      @suraj351 3 года назад +2

      *Oh! Voice 🎙🎶*
      *Mujhe Accha Laga ki Tum Explanation karke Video Bana rahe ho...Thanks*

    • @harshitrathi3077
      @harshitrathi3077 3 года назад

      Please Reply Me In instagram

    • @Hacker-hm7nj
      @Hacker-hm7nj 3 года назад

      Sir, Your voice is very sweet. Please make more videos with voice. don't Use music........ Please Please Please.

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

      What Is The Coding Software You Use?

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

      bhai sab samajh agaya yaar, thank you sooo much 😍😍

  • @triplets1019
    @triplets1019 2 года назад +7

    Such a good explanation..i searched for it the entire day but finally found this one...keep it up 👍

  • @alilaishanzahir3448
    @alilaishanzahir3448 8 месяцев назад +3

    Have been struggling with the responsive navbar for a lot of days now. Finally today learnt how to do it. Thank you for the awesome guide. Subscribed instantly. 😃

  • @amlan715
    @amlan715 2 года назад +4

    Thank you so much. I was following webdev simplified he actually used JS to achieve this functionality but your way is really awesome, easy and more feasible. 🙏

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

      Glad to hear that.. Thanks a lot

  • @user-yk4eu6re1v
    @user-yk4eu6re1v 11 месяцев назад

    The way you have explain everything is really awesome finally without the use of javascript I got to learn about hamburger menu it helped me alot Thank You 😊

  • @earnbangearn1194
    @earnbangearn1194 2 года назад +5

    This is wonderful and simple. Absolutely, easy to learn. Thank you so much

  • @sahilgupta4340
    @sahilgupta4340 2 года назад +2

    I was looking for tutorial which tells us what is the use of each element we were using!! Thanks a lot! GREAAAT VIDEO !!

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

    nice, i was actually searching for the navbar video with explanation

  • @shubhammittal5342
    @shubhammittal5342 3 года назад +10

    Thank u sir for your reply ! ❤ U r really making awsm content! Plus u also help out when its needed. Thanks a lot

    • @CodingLabYT
      @CodingLabYT  3 года назад

      Thank you 💙😁... Stay tuned.

    • @AtulyaAndroidHacker
      @AtulyaAndroidHacker 3 года назад +2

      @@CodingLabYT bhai source code dedo #CodingNepal

    • @AtulyaAndroidHacker
      @AtulyaAndroidHacker 3 года назад

      @@CodingLabYT bhai coustom video and audio player banao na
      like pexels .com

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

    thangs bhaiya your content is soo use full for menu bar i watch lot of video but me don't understand
    but when i did watch your video then me have been full understand about how to work navigation bar

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

    I saw tons of tutorials to learn response navbar... But From your video finally I created my first one.... 🔥🔥🔥🔥🔥 Thanqq soo much for this video... 1+ Subscribe from my side...

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

      Glad to hear that.. Best regards

  • @josesuch4962
    @josesuch4962 3 года назад +2

    I really learned a lot from this. Thank you. I'm sharing your work to my classmates.

    • @CodingLabYT
      @CodingLabYT  3 года назад

      You're welcome... Stay tuned 😁

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

      pourquoi tu ments

  • @AbhayRajpoot-fy8ei
    @AbhayRajpoot-fy8ei 2 месяца назад

    Thanks bro thank you very much 2 deen se paresan tha our apki ek vedio me bahut axe se aya our responcive website banene bhi lgi mujhe..💓💓💓💓💞💞

  • @fivearmies5977
    @fivearmies5977 3 года назад +2

    Really appreciate How you put all of your effort in making this video.
    Hope you will make this responsive thing much easier in life.

    • @CodingLabYT
      @CodingLabYT  3 года назад

      It is responsive bro 😊❤️

    • @fivearmies5977
      @fivearmies5977 3 года назад

      @@CodingLabYT already loved it
      I mean to say you can build more tutorials in future on this topic.

    • @CodingLabYT
      @CodingLabYT  3 года назад +1

      Sure 😊 Stay Tuned ❤️

  • @shopnerrajkumar7391
    @shopnerrajkumar7391 3 года назад +9

    Bro, the way you explained everything was awesome and your menu is also great but it would be more perfect if you had added a dropdown in this menu. Can you help me ??

    • @CodingLabYT
      @CodingLabYT  3 года назад +2

      Okey stay tuned ❣️😊

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

    Very helpful and inspiring! Thanks!

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

    A very simple & awesome explain this video. Thanks ❤️

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

    Bro Awsome..... Actually I'm from South India U explained very well tht even I could understand.. Superb dude pls continue videos with explanation. Thanks dude

  • @negi3625
    @negi3625 3 года назад +1

    Thanks bro 😁😁This is my first time that I have made something like this

    • @CodingLabYT
      @CodingLabYT  3 года назад

      Always welcome my friend 😊❤️

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

    This content is awsome . you explain very well . thank u so much

  • @savanprajapati5322
    @savanprajapati5322 3 года назад +2

    Amazing sir I find the best video for making navigation bar from you thanks👍👍👍👍

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

    Great video.
    very helpful vedio. thanks for sharing your knowledge
    carry on bro and creating videos.

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

    and your teaching and speaking about all one by one topic whise explation method is best

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

    Thank you vere much, this video really helped me out I appreciate your efforts for making this kind of vid

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

    Sir, first of all you are great coder,
    Sir maine bahut Shara video dekha but samgh mai nahi aaya but first time aapka video dekha or total clear hai
    Aap ka teaching karne ka method bahut simple hai jo easily beginners ko samgh mai aagayega god bless you sir ☺️

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

    Great tutorial. simple and easy to follow!

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

    thanks for such an amazing tutorials. really helpful and even for free. Amazing tutorial.

  • @suraj351
    @suraj351 3 года назад +2

    *Oh! Voice 🎙🎶*
    *Bhai Mujhe Accha Laga ki Tum Explanation karke Video Bana rahe ho...Thanks*

    • @CodingLabYT
      @CodingLabYT  3 года назад

      You're welcome.. Stay tuned 😁

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

    Amazing Bro..👏 Nice Content Deliver in a nice Way 👍👌

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

    Tnx brother me to JavaScript ka use karke baars ka use kar rha tha it is very useful video thanks to you 100%🙏

  • @jobaer23.
    @jobaer23. Год назад

    Mene apki video 2 sal bad dekhrahu but ye video mujhe bohot accha laga he, ekdomse full details ke sath responsive kese karte he o iss video me apne bata diya hee 🙈🥰🥰🥰 or mene is video ko download karliya.thanks 😊

  • @COFFY_GAMING
    @COFFY_GAMING 3 года назад +1

    Thanku so much sir u are giving us good knowledge and best content love u sir

    • @CodingLabYT
      @CodingLabYT  3 года назад

      Always welcome my friend 😊❤️

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

    What you are doing bro so nice 👍 no one can teach me like you .......thank thank thank you bhai

  • @iUmerFarooq
    @iUmerFarooq 3 года назад +1

    Behtareen 👌 Tutorial.
    Is channel pa or be ziyada content daloo.
    Thank you

    • @iUmerFarooq
      @iUmerFarooq 3 года назад +1

      @@CodingLabYT Acha ❤️

    • @CodingLabYT
      @CodingLabYT  3 года назад

      Okk.. Video dekhte rehena.

  • @renantibia92
    @renantibia92 2 года назад +13

    Thanks for sharing your knowledge, I'm learning a lot from everything you post! I love your videos!🇧🇷

  • @ISLAMICVIDEOS-rf5ob
    @ISLAMICVIDEOS-rf5ob 3 года назад +1

    I really learned a lot from this.

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

    you are best teacher! thanks for such best job. God bless you

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

    When we click on menu icon question is will it use its full height of header or the remaining content comes after menu button

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

    Thank uhh so much for this amazing tutorial 💚it's really helped for mee

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

    broo you are the best. God bless you. Aameen

  • @AbhishekSingh-fm6lu
    @AbhishekSingh-fm6lu Год назад +1

    Hey bro the way you explained no one can on RUclips

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

    dude your working method is really impressed me, And it was quite easy to grab the concept. I really appreciate your work..

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

      Glad you like it. Best regards!!!

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

    AAP bahot hi simple way me batate ho ... Thank you Bhaiya ..😊

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

      Glad you liked it. Best regards.

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

    thank you so much sir freshers needs you keep it up sir 😊😊

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

    The way you this video is great .. Thanks 🥰🥰🥰

  • @ram.bhandari
    @ram.bhandari 3 года назад

    amazing bro!! big fan of you!!

  • @pedrobonini3031
    @pedrobonini3031 3 года назад

    Thank you so so much, man, you really help me out of a huge problem hahahah thanks

    • @CodingLabYT
      @CodingLabYT  3 года назад

      Always welcome bro❤️😊

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

    very nice and clear explanation. Thank you

  • @thecgr
    @thecgr 2 года назад +3

    Make footer too, and also show how to include these footer and headers in all my pages....
    Thank you for this, it was really helpful.

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

      I have already made many Responsive Footer please have a look

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

      @@CodingLabYT Okay, cool!

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

      @@CodingLabYT Brother, I need help with linking this nav.html
      To my index.html and all other pages like about.html , service.html like every page must have that navigation bar!

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

      I will check. DM me on Instagram or Facebook link is in RUclips video description

  • @sabbirshuvo918
    @sabbirshuvo918 3 года назад

    you are the great man it was very helpful for me

  • @vuongqtvn
    @vuongqtvn 3 года назад

    i love content video, Keep it up, it's very useful

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

    your explanation skills are next level !!!

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

    I don't understand your language, but thank you for sharing your knowledge! It was really helpful

  • @adityathota8855
    @adityathota8855 3 года назад +1

    Thanks, good explanation

  • @Pulguetafx
    @Pulguetafx 3 года назад +2

    I loved this, but can you show how to make the scroll is locked when the nav menu is open on mobile? Also, how would I do if I click on one element of the navbar and close the menu as it scrolls right to the div I want? Thank you for this content, I'm learning a lot with you. Best 👌

    • @CodingLabYT
      @CodingLabYT  3 года назад

      Watch this for you solution ruclips.net/video/UHSeFxZIuv8/видео.html

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

    You are just awesome♥️
    Bahut badhiya se smajhaya

  • @m.muzammilqureshi1311
    @m.muzammilqureshi1311 3 года назад

    Thank you sir really helpful tutorial💞

  • @user-zk8oi2sd6p
    @user-zk8oi2sd6p 4 месяца назад

    Thank you

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

    Thank you so much you're the best♥️♥️♥️

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

    brilliant work

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

    Sir you have explained very well, I would also request you to help us with sub-menu or a dropdown.
    And please let me know when you're going to explain.
    I'll be very thankful to you.

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

      Already available in my channel. Hope you will like it.

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

      @@CodingLabYT Thank you so much sir.
      Is there any way we can create a responsive menu bar using only HTML & CSS with sub-menu or drop-down list but no Java script.

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

    Thank you so much....

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

    thanks it helped a lot in my project

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

    Helpful video, Thanks.

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

      Thank you for liking the Video

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

    Amazing bro ...thnks for this video.

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

      You're welcome Saeed

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

      @@CodingLabYT bro plz plz make responsive navigation with topbar
      Top bar containing .... Social media and contact professional look.

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

      Do check in my latest videos you will get.

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

    Its very helpfull ...Thanks bro..

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

      Glad it helped. Best regards!!

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

    Thank you so much for your help....

  • @rugvednarvenker996
    @rugvednarvenker996 3 года назад

    @ CodingLab How is it that when you put the menu button in some videos it comes on left side while in other cases it appears in right automatically?

    • @WasimKhan-ux9qn
      @WasimKhan-ux9qn Год назад

      instead of left write right in css. it will transite from right side

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

    Great video bro, but how to make the menu slide to the bottom not to the right when in mobile?

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

    Great video for beginners 🔥

  • @MR.SubratGarnaik
    @MR.SubratGarnaik 5 месяцев назад

    i wish every video tutorial has Voice over...:)

  • @skills6233
    @skills6233 7 месяцев назад

    🙏🏼 thanks pro

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

    If wanna menu button shows in also in PC then what should do

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

    thank you so much...............

  • @_anonymous.0007
    @_anonymous.0007 Год назад +1

    Thanks ! sir, your video helped me alot but my question is how to add a logo instead of any name (Brand) ...

  • @atomruby4096
    @atomruby4096 3 года назад

    keep it up, awesome work there

  • @truemufti
    @truemufti 2 года назад +2

    you solved my problem
    thank you very much

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

      You're Welcome. Best regards.

  • @koutilyanamdeo8727
    @koutilyanamdeo8727 3 года назад +1

    Awesome work 🔥

  • @AbdulKhan-fb6mo
    @AbdulKhan-fb6mo Год назад

    So does the navigation menu hide after you click on a nav link?

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

    Bhai apne haklate haklate hmko sb kuch samjha diya
    Thanks bro 🙏🙏

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

    Amazing job, i learned a lot, and the finish is amazing, but i did everything like you, and my menu when i clic the button appears sliding from right to the left, instead left to right like your video

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

    Thank you sir it realy helped me

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

    thank you bhai, majjale bujayew timile.

  • @mdrezaulkarim993
    @mdrezaulkarim993 3 месяца назад

    Thanks

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

    Thanks bro. helped a lot .

  • @kiwimaheshwarithelabrador3805
    @kiwimaheshwarithelabrador3805 3 года назад

    Great , but can you help me to and header for multiple pages as the if I navigate to second page then the respective page button is not active

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

    Sir i have used this as header and i am try to add this with a page but it is no showing good the header and page are seeing side by side how to fix this

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

    Thanks alot very nice explanation.

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

    Wow very wonderful this craft

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

    tq so much bro

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

    Great ♥️

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

    Aapka video bohot achcha hain ichaliye thanks. Lekin main chaahata hoon nested/dropdown mobile menu support for wordpress.

  • @kamakshikhawse
    @kamakshikhawse 3 месяца назад

    Thankyou so much!!!!❤ You saved me🥹

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

    Thank you for this awesome video

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

    Thanks brow for this solution

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

    Thank you sir really nice tutorial

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

    Lot's of Love 💟💟💟 from Nepal

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

    Love this tutorial

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

      Glad you like it. best regards

  • @Lavkushkumar-cn9me
    @Lavkushkumar-cn9me 2 года назад +1

    Great Work Sir!

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

    bhai please make a playlist on these topics (only html css). for practice on every css topcis