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

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

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

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.c... **❤❤
❤ For Thapa Family Use Special Discount Coupon: THAPA7 ❤❤
For More check the Website Link: www.thapatechn...
***************** BEST OFFER ON SERVER 👆****************
👉 For Domain & Hosting Playlist: • Domain & Hosting In Hi...
👉 For Free Source code: www.thapatechn...
😍 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

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

15 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@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 2 года назад

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

@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 2 года назад

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

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

@@shailidwivedi2045 aap kaunsa course kiye hai

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

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.

@vinaypatil8009 Год назад

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

@FSCOMSSarang Год назад

😂 Awesome bro

@StrikingCommoner Год назад

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

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

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

@harsh_govind Год назад

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

@gurgaonall Год назад

Good learning platform

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

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

@shubhamdas6519 Год назад

Thanks for the video sir.....

@americandude3620 Год назад

man gaye bhaiya ji apko ❤❤

@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

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

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

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

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

@mamtadesai599 6 месяцев назад

good knowledge

@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.

@missamshah 14 дней назад

You are great

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

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

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

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

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

you are greate sir love you💖💖

@tqaquotes9379 Год назад

Excellent. A complete tutorial. Helpful. 👍

@sajidakhan9866 Год назад

thnk u😊

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

Awesome Bro

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

Eventually i learnt this, Thanku

@itsmuziyt3279 Год назад

thank you boy!

@priyapathak3146 5 месяцев назад

Thank you so much bhai

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

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

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

Thanks you sir

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

great

@fitwithgurdeep Год назад

Thank You So Much Sir ❤

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

helpfull :)

@gurvinder1613 Год назад

Hey what theme are u using

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

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??

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

Bhaiya, awesome video bhaiya css variables pe video bnado

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

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

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

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 10 месяцев назад

Thapa bhai Jindabad

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

thank you bro

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

Thanks bro . ❤

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

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 2 года назад

Java learn from durgasoft besic to advance

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

Aap kaunsa course kar rahe hai

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

@@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

@tonytony-fc6gq 2 года назад

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

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

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

@ashubisht7278 Год назад

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

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

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

@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 2 года назад

Aap create kar lenge

@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

@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.

@Agnidipa_manna Год назад

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

@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

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

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

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

Bootstrap 4 se sidebar menu navigation kese bnaye...

@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

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

From Where I can download these picture

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

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

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

halooo bade bhaiyaa.......

@vipinmotivationalytshort5574 6 месяцев назад

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

@akshitajha7029 5 месяцев назад

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

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

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

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

13:40

@bilawal-7930 Год назад

Bhai mujay Domain and Hosting Kareedni hai .

@user-vk1lq1kl5i Год назад

36:00 yeh active class hai kya?

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

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

@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 ?

@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 ? 🤔🤔🤔🙂🙂

@codingstudypoint Год назад

Have a Nice Day All off You

@mushtaqueahmed5087 Год назад

Koi bata sakte hein gap property mein kia hein

@bhuminegi495 Год назад

😮

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

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

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

Mast video h sir 👍👍 🔥🔥👏👏

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

First mein tha

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

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

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

First view

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

Congratulation 🥇

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

Or boom guys 😅😅

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

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

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

Sir classified add website ka tutorial banao pls

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

Hello sir 😄

@morningstarknows320 Год назад

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

@shahreenkhan57 Год назад

Transform translate100% showing some error

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

Bhai drop-down bhi dal deta 😅

@CS_HimanshuVishwakarma Год назад

Isme easy kya he

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

Are you nepali

@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 !