🔴 Create Responsive Navigation Bar using HTML CSS & JavaScript in 2022

Подписаться 669 тыс.

Просмотров 116 тыс.

50% 1

Welcome, In this video, we will see how to create a responsive animated navigation bar using HTML, CSS & JavaScript in Hindi.
What exactly we are going to do to make a complete responsive Menu bar using HTML CSS & JavaScript 👇
📄 How to create a header with logo and nav element
📄 How to give proper class to all the HTML elements
📄 How to style header for the desktop version
📄 How to add Mobile Navbar Icon Button
📄 How to Hide the Mobile Icon in the desktop version
📄 How to unhide the Mobile Icons & Hide the original navbar when we are below 980px width.
📄 How to change the look of Navbar for Mobile version with animation
📄 How to add Active class on the header using JavaScript and also how to toggle between the close & Open Menu Icon depending on click
***************** BEST OFFER ON SERVER ****************
Guy's If you are thinking of buying a server(Web Hosting) then this is the best time because I have a special offer for you ❤
If you buy through the link given below, then you will get 😍
Minimum 70% to 90% Discount(Depends on Plan) + 7% Extra Special Coupon Code + 200rs Cashback after 1Month
I know you love the Offer right It's better than the Black Friday Sale ✌ Only for Thapa Technical Family 👇.
❤❤ ** Click Here For Server Link: www.hostinger.com/thapa7 **❤❤
❤ For Thapa Family Use Special Discount Coupon: THAPA7 ❤❤
For More check the Website Link: www.thapatechnical.com/2022/0...
***************** BEST OFFER ON SERVER 👆****************
👉 For Domain & Hosting Playlist: • Domain & Hosting In Hi...
👉 For Free Source code: www.thapatechnical.com/2022/0...
😍 Check my Instagram to Connect with me: / thapatechnical
------------- Timeline ------------
0:00 Menu Preview
3:10 hostinger
4:05 Folder Structure
5:15 todo App for Project
6:00 Header with logo and nav element
8:40 Other Section HTML Code
9:30 How to Comment
9:50 Add CSS file to the main file
10:30 style header for desktop version
17:50 Other Section CSS Style
18:35 Adding Mobile Navbar Icon
21:10 Style the Mobile nav icon
22:50 Hide Mobile Icon in desktop ver.
23:00 Hiding the Close Icon
24:00 Responsive Code for Menu
27:00 Hide the Navbar in Mobile ver.
28:00 Changing Navbar Style for Mobile
35:00 Add Active class on header.
39:00 Toggle close & Open Menu Icon on click
43:00 Checking Menu Responsiveness
43:25 Host Menu on Server

Опубликовано:

11 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 133

@ThapaTechnical 2 года назад

****************** BEST OFFER ON SERVER ***************** Guy's If you are thinking of buying a server(Web Hosting) then this is the best time because bcz HOLI SALE IS LIVE & I have a special Coupon Code for you ❤ If you buy through the link given below, then you will get 😍 Minimum 70% to 90% Discount(Depends on Plan) + 7% Extra Special Coupon Code + 200rs Cashback after 1Month I know you love the Offer right It's better than the Black Friday Sale ✌ Only for Thapa Technical Family 👇. ❤❤ ** Click Here For Server Link: www.hostinger.com/thapa7 **❤❤ ❤ For Thapa Family Use Special Discount Coupon: THAPA7 ❤❤ For More check the Website Link: www.thapatechnical.com/2022/03/create-responsive-navigation-bar-using.html ****************** BEST OFFER ON SERVER 👆***************** 👉 For Domain & Hosting Playlist: ru-vid.com/group/PLwGdqUZWnOp0ND1_EVCS-hClmA168Ky1L 👉 For Free Source code: www.thapatechnical.com/2022/03/create-responsive-navigation-bar-using.html 😍 Check my Instagram to Connect with me: instagram.com/thapatechnical

@naturelife9647 2 года назад

Bro help me I work one project but my website sroll bar not showing. Why and how can I solve it plz suggest some option

@pratikdalvi4604 2 года назад

Can we have a video on "Responsive navbar with Dropdown and Sub-dropdown List" in your way?

@Dark2115azazel Год назад

best content i have ever seen on the youtube. i really apriciate your wrok.i have watched many tutorials they all are same but you have something different : you are using latest skills and logics are aowsome. Thanks for creating such well organised content

@Anonymous-vu1dn 2 года назад

Thapa technical,code with Harry , apna college best to learn code from this channels

@Abhinav-cx6mh 2 года назад

You forgot one more channel bro gekky shows

@Anonymous-vu1dn 2 года назад

I don't know about it bro

@traveldiaries9597 2 года назад

Add design course, Kavin Powell and academind

@_.Mustafa._ 2 года назад

and Brad Traversy Media either

@ashfaqmasoodi8214 Год назад

True

@harsh_govind Год назад

Thank you. You solved my problem. Looking forward to learn more.

@StrikingCommoner Год назад

You're true symbol of best online education. God bless you

@manikantmani1196 2 года назад

Without coding background, I have learned 90% of web development from Thapa Sir and Currently, I got an internship as a front-end react developer. Thank you so much thapa sir. Love from Bihar(Samastipur).

@ASHUKUMAR-gu7jv 2 года назад

In how much time did you learn Front end ?

@ASHUKUMAR-gu7jv 2 года назад

And got placement?

@stockforwealth3182 Год назад

90% mean you're eligible to work for top tech industry like Google, Microsoft, Facebook... Without degree...

@abhishektiwari2643 Год назад

@@shailidwivedi2045 aap kaunsa course kiye hai

@abhishektiwari2643 Год назад

Aap kaunse company me intership kar rahe hai Aur kaunsa playlist access kiye the front-end development ke liye Ham bhi frontend me advance HTML CSS JavaScript and backend me oracle database shikh chuke hai Aur java shikh rahe hai Company me web developer ke liye kya kya aana chahiye

@anonym0us__537 Год назад

43:10 is what true love looks like...❤ I was stuck in this button click navigation menu for 2 days I was totally getting frustrated and felt like quitting it i watched many videos maybe more than 10 to 15 but you saved me.

@salmankhan-gx5hr Год назад

Eventually i learnt this, Thanku

@tqaquotes9379 Год назад

Excellent. A complete tutorial. Helpful. 👍

@vinaypatil8009 Год назад

Awesome channel Awesome content Awesome explanation Awesome teacher Best Web Dev channel in Hindi Language

@FSCOMSSarang Год назад

😂 Awesome bro

@saykathbiswas 2 года назад

great sir. I follow your videos. you are doing great job. make some CSS stylish menu.

@fitwithgurdeep Год назад

Thank You So Much Sir ❤

@shubhamdas6519 Год назад

Thanks for the video sir.....

@priyapathak3146 3 месяца назад

Thank you so much bhai

@americandude3620 Год назад

man gaye bhaiya ji apko ❤❤

@gurgaonall Год назад

Good learning platform

@foodmoodaventurecooking 2 года назад

"RU-vid: life Changer" "Tiktok: Gender changer" "Thapa Technical : Mind changer"❤️❤️

@samriddhabajpai1846 2 года назад

Bro, i have one problem. How can i get the Indian cities and states details by putting the value of pincode in React JS? please guide me on the same.

@asadrehan7788 8 месяцев назад

you are greate sir love you💖💖

@legendarygamers1703 2 года назад

Thanks bro . ❤

@mamtadesai599 4 месяца назад

good knowledge

@sidgaming3046 2 месяца назад

39:46 ohhh my god 😂😂😂 btw nice video bhai 👌

@me_sumit_0 Год назад

Awesome Bro

@itsmuziyt3279 Год назад

thank you boy!

@AkramKhan-ez9lr Год назад

please reply witch themes and font style you use in this video.

@StudyMaterial61 8 месяцев назад

thank you bro

@sripathisri4506 Год назад

bro navbar-link:visitied styles are not applying display in line block,text deceration none these styles are not applying means not taking styles in html

@minbahadur4996 Год назад

Nice video

@shekharchandrabiswas77 Год назад

thank You Sir

@_PRANAYMATE 9 месяцев назад

Thanks you sir

@peaceenlightenment9630 2 года назад

Can we have a series like you are building a college website with some basic applications like realtime messaging and such..... We would love to learn how to actually deal with clients for such project. Going from all the way of designing to deployment.

@abdulhameedkhan5178 24 дня назад

If we r making site with the help of html and css only then will it works?

@kushal_97701 8 месяцев назад

great

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

i'm adding project section but scrolling is not working what i do ?

@harivishvakarma4903 2 года назад

sir please make video on MEAN too.. if that's possible to you!!

@sajidakhan9866 Год назад

thnk u😊

@RakeshKumar-el5gd 2 года назад

Bhaiya, awesome video bhaiya css variables pe video bnado

@gurvinder1613 11 месяцев назад

Hey what theme are u using

@TanmayMandal-zl5xy Год назад

helpfull :)

@sandeepkumar-eo4ed 2 года назад

Bhai ek blog website banao PHP with admin panel fully dynamically tag , category and post .

@muhammadumer9956 2 года назад

Bro can you please make a complete tutorial on how to make a ptc website using html css and JavaScript please bro

@AayushAdhikari-uj6vn 4 месяца назад

While creating active class and adding it didn't work. Navbar list item is not shown only colour appears at header , but content is not shown.Why??

@khushbukumari6000 2 года назад

Thanks a lot sir ...🙏

@mihir7749 Год назад

hey there, hope u r doing well I just want to ask you that, do you code on regular basis ? you are so cute! Girls who code are legends !! massive respect🙏🏻🙏🏻

@khushbukumari6000 Год назад

@@mihir7749 yes , i do it on regular basis

@mihir7749 Год назад

@@khushbukumari6000 Great! Alright Khusbu, I want you to create projects based on React. U know React? if not what about Javascript?

@khushbukumari6000 Год назад

@@mihir7749 yes mam, but now i intermediate in react js

@khushbukumari6000 Год назад

@@mihir7749 I am preferred in javascript

@skillme7777 10 дней назад

by applying overflow-x:hidden. the animation stopped working. hamburger menu button isn't working, but if i remove the overflow-x then it starts working again but its become scrollable please help me.

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

Thapa bhai Jindabad

@VIJAY_B_1998 2 года назад

halooo bade bhaiyaa.......

@peaceenlightenment9630 2 года назад

Tapai sanga blockchain development ko kei knowledge xa? Xa vane kasari siknu vayo ra k k recommend garnu hunxa sikna lie?

@tonytony-fc6gq Год назад

I don’t understand language but I’m still watching

@user-bv8vh7nv9i 2 месяца назад

why did we only add active class to header cant we add it to div class of the icons

@swapnilpal6829 2 года назад

Hello sir, plse create a flight or railway booking system project with help of html, css javascript, bootstrap

@raviiirathore9984 2 года назад

Bhai aap sab youtubers se Great ho yaar 😍😍

@abhishektiwari2643 Год назад

Java learn from durgasoft besic to advance

@abhishektiwari2643 Год назад

Aap kaunsa course kar rahe hai

@raviiirathore9984 Год назад

@@abhishektiwari2643 I am learning JavaScript not Java...

@mihir7749 Год назад

@@raviiirathore9984 would you mind working on some projects with me ?? on some random projects ??

@raviiirathore9984 Год назад

@@mihir7749 Sure

@arsalanrehman9117 2 года назад

Hi sir mern ki Jo vedio thi sign in ma issue arhs like local host k bard bhe proxy k bar bhe error araha hy

@ashubisht7278 9 месяцев назад

Hi I want to learn mobile nav bar ke aage hme contact now ka button kese lagye

@codingstudypoint Год назад

Have a Nice Day All off You

@sadavarshsaini9801 2 года назад

Bro redux toolkit se shopping cart par video bnao yr pure RU-vid par khi nhi mil rhi jis se samjh ske

@ut_vectoranime26 2 года назад

Mast video h sir 👍👍 🔥🔥👏👏

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

Plz main abhibi js chalu nahi kiya ...ishliye mujhe wo js me arrow keyse aya samajhme nahi aiya ...plz wo wala line thora abhike liye koi batado

@bishwaschhetri6631 2 года назад

Hello brother .Big fan from nepal .how to connect with you.

@bhuminegi495 11 месяцев назад

😮

@Anonymous-vu1dn 2 года назад

First mein tha

@gunjanbarik4692 2 года назад

First view

@ThapaTechnical 2 года назад

Congratulation 🥇

@SakshiSharma-yb7fu 2 года назад

sir, make a video on icons pls

@mihir7749 Год назад

Hey there Sakshi... May I know which type of video u would like to see on icons ?? I want to know if by any chance would you like to work with me on some random projects ? 🤔🤔🤔🙂🙂

@user-og9ul1su5m 7 месяцев назад

From Where I can download these picture

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

36:00 yeh active class hai kya?

@ratnaprabhashirsat7502 2 года назад

Bro please make video on How to apply google ads to our website in hindi Please Make video on it 🥺🥺🥺🥺

@ratnaprabhashirsat7502 2 года назад

Please read it and reply Thapa bhi

@protrickscornerofficial 2 года назад

Hello sir 😄

@shivomchauhan 2 года назад

Sir classified add website ka tutorial banao pls

@rajeevyadav-np3fg 9 месяцев назад

Bootstrap 4 se sidebar menu navigation kese bnaye...

@laxmehraeditz1758 2 года назад

Bhai mera aapse ek challege he - Ki agar aap asi website ka page bana de jisme hum first page par photo select kare or wo photo second page pe dikhe....to me man jaunga ???

@abhishektiwari2643 Год назад

Aap create kar lenge

@SunilKumar-wy7lc Год назад

13:40

@vaishakhichavan8067 Год назад

gold shop pe project banao please. navbar home, about(1.vision 2.mission 3.our network, jewellery, gallery,contact. please jaldi banake bhejo

@dishindayani25 2 года назад

Or boom guys 😅😅

@bilawal-7930 10 месяцев назад

Bhai mujay Domain and Hosting Kareedni hai .

@HGGupta-bk2cn Год назад

bhai to do list ki video chahiye jo banaya hai wahi same

@akshitajha7029 2 месяца назад

I didn't get after 29 min why did you use width 100℅ n absolute property please sir aap bata dijiye

@akshitajha7029 9 дней назад

Thank you sir aaj 2 months baad mujhe ye samjh aa gaya, god help those who help themselves

@TheTechBazz 2 года назад

Bhai Tune Ye to Nahi Batya Ki active Class present nahi Hai Tab Ye menu Bar nahi aayega sidha hi bata Diya Ab mene bana liya but jab bhi isko opan krta hu Tab Pahale menu bar opan hota hai iska solution bata de yar 2-3 Din Se lag raha Hu isko banane ke liye Please Reply Krna 🙏

@mihir7749 Год назад

AJAX... did you get your answer?? is your problem solved ?? tell me we will together work on projects you like. Isn't it a good idea ?

@mushtaqueahmed5087 Год назад

Koi bata sakte hein gap property mein kia hein

@vipinmotivationalytshort5574 4 месяца назад

thank you bro , lekin .js kuchh jagah nahi samajh me nahi aaya bro

@avinashsharma9259 2 года назад

web development ke saath video editing bhi sikh letet bhai audio lag hai

@indiancuriousvoice8773 Год назад

If you use JQUERY you have to 50% less code for css.

@shahreenkhan57 Год назад

Transform translate100% showing some error

@rohanpurane6249 8 месяцев назад

Bhai drop-down bhi dal deta 😅

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

bhai vo sab to thik hai pr ye baat baat pr guys guys boom guys mt kiya karo..

@rytham771 2 года назад

Are you nepali

@CS_HimanshuVishwakarma 11 месяцев назад

Isme easy kya he

@similarthoughts8655 Год назад

boom guys boht bura lagta hai na bola karo

@priyank9873 2 года назад

4 min waste in starting

@mihir7749 Год назад

Hello Priya ! may I know in which field you are currently working? I mean your occupation and all??

@muhammadumer9956 2 года назад

Bro can you please make a complete tutorial on how to make a ptc website using html css and JavaScript please bro

@mihir7749 Год назад

Hey there Umer, would you like making projects together? All project ideas will be random. And also tell me whether you are done making your PTC website or not.

@muhammadumer9956 Год назад

@@mihir7749 Oky, Do you have any projects ?

@mihir7749 Год назад

@@muhammadumer9956 I have one valuable project idea of creating a website that will be based on a personal portfolio. That website will show all the achievements of the creator mainly to show his/her works to clients. It will be a multipage website! ❤❤ Tell me how you find this idea and also I would like to know about your website which you were asking for.🙏🏻🙏🏻

@muhammadumer9956 Год назад

@@mihir7749 Ok I Know that how to make portfolio website And once I've joined a ptc website, then i thought that why I'm working on someone's website. And then i decided to make my own website. But mine project is not complete yet bcz i didn't find most of thinks on internet. like admin panel etc. but as an beginner I'm successful in making a unique style of landing page and home page. & i want to know about you ? like what do you do and where you from ?

@mihir7749 Год назад

@@muhammadumer9956 I really appreciate your decision. Ok Umer, please tell me If I can have a look at your website. And let me tell you if you want I will be happy to help you in your project. Well I am from UP, India. And I am a budding Web Dev !