Responsive Navigation Bar with HTML CSS & JavaScript | Dark/Light Mode

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

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

50% 1

Responsive Navigation Bar with HTML CSS & JavaScript | Dark/Light Mode | Coding lab
In this video tutorial, I have shown how to create a Responsive Navigation Menu Bar using HTML CSS & JavaScript with dark and light mode or theme. The exciting feature of this website is selected theme will not change if we refresh the page or reopen the file and you can close the sidebar by clicking any area of the webpage. I have added a search bar in this navbar and this navigation bar is fully responsive. I have provided all the source code of this navbar, the link is given below.
🗂️ Get Source Code of this Navigation Bar
➤ buymeacoffee.c...
🌐 Visit CodingNepal for helpful coding projects
➤ www.codingnepa...
⭐ Hire me on Fiverr
➤ www.fiverr.com...
📷 Follow me on Instagram
➤ / coding.np
🤝 Support my work with a coffee
➤ buymeacoffee.c...
Timestamps:
01:44 Importing Google fonts - Poppins
02:44 Importing Fonts icons - boxicons
02:58 HTML code for Navigation Menu Bar
03:52 CSS code for Navbar Menu
04:07 Creating variables of color for Navbar Menu
08:15 Creating navigation link's indicator in CSS
10:00 Adding Dark and light mode or theme feature in the navbar
19:36 Creating Search Bar in the Navbar
25:34 Making Navigation Menu Bar Responsive
---
Follow me on
➤ Instagram - / coding.np
➤ Facebook - / coding.np
#NavigationBar #NavBar#HTMLCSSJavaScript #DarkLightMode
---
Music Credit:
Deep Sea by Vendredi / vendrediduo
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/-deep-sea
Music promoted by Audio Library • Deep Sea - Vendredi (N...
Ikson - Anywhere (Vlog No Copyright Music)
• Ikson - Anywhere (Vlog...
Something 'bout July (Instrumental) by RYYZN
Free Download / Stream: bit.ly/-_someth...
Music promoted by Audio Library • Something 'bout July (...
Track: Lost Sky - Vision [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Vision | Du...
Song: Ehrling - You And Me (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
➤ Video Link: • Ehrling - You And Me (...
Keywords:
Responsive Navigation Bar with HTML CSS & JavaScript,responsive navigation bar with html and css,responsive navigation bar with html css and javascript,responsive navigation bar,responsive navigation bar html css javascript,responsive navigation menu bar using html css & javascript,responsive navbar with search box,responsive navbar,how to create navigation bar in html and css,how to create navigation bar in html css,how to create navigation bar in html css javascript,lab

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

28 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@w........ 2 года назад

watched around 20 minutes of this, looks great

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

9:55 A question how do I turn this point into a white color line

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

Can you make a video tutorial to make a slider with 4 items that run automatically, drag and next prev button with javascript no library?

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

awesome!

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

Plz what can i import into my css other thing than fonts. Special Colors anything?

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

Hello? can you make a simple tutorial of animal management system? It's not about being demanding but I really need it because it's for our capstone thesis at least as a basis. Hope you notice this. This will really help us a lot.

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

or how to create a management system with database

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

Please make a series about this type website how can we create and which keywords do which section

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

OK thank you so much

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

I will try it Coool...Awesome

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

Can you please make a Tutorial about a shop with product cards in the Website(Not ohne big in the middle) with Shopping cart and where you Finaly can pay. I Hope you can do this.

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

Cool, will try it

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

good work... thanks

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

Glad it helped

@alejandropachecogarrido3176 Год назад

how to add a dropdown in one of this menu?

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

Suggestion ::: How to make a search engine which will pull data from google and shows us the search results... This will be great✌ --> By the way your videos are great❤

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

what ever you type in there the file name that matches the search changes to that file and when ever you gibberish you get a 404 screen

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

thank youuuuuuuuu

@pritesh_2564u Год назад

awesome video 👍👍👍

@CodingLabYT Год назад

Thank you! Cheers!

@pritesh_2564u Год назад

@@CodingLabYT how can we apply box shadow at footer ?

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

make my profile script with coding

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

I'be waiting source code, máster.. 🙏

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

Hey buddy , you are a good CSS coder will you join my company.

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

Can you please make a Tutorial about a shop with product cards in the Website(Not ohne big in the middle) with Shopping cart and where you Finaly can pay. I Hope you can do this.

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

Can you please make a Tutorial about a shop with product cards in the Website(Not ohne big in the middle) with Shopping cart and where you Finaly can pay. I Hope you can do this..

@Ahmad-lt2ff 2 года назад

Mantapp, Terimakasih Banyak atas tutorialnya.

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

Its really helpful in my project thanks 😊

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

Is your channel monetize? Please reply please please please 🙏🙏

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

Can you give me source of code?

@PoonamDevi-qy2qy 2 года назад

Check description

@Deus-lo-Vuilt 2 года назад

I hope you upload more videos like this

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

I will

@Deus-lo-Vuilt 2 года назад

@@CodingLabYT thanks

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

Waiting for the source code

@Deus-lo-Vuilt 2 года назад

Thanks men

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

Very cool! Thank a lot !

@com-X Год назад

10:22

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

i made the search bar work

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

hello, I am new to web development... Plz suggest me a source code editor !

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

i suggest you Vs code ^^

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

very helpful , thank you so much man

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

You're welcome!

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

I have a question. how long does it take to fully learn programming languages like html css javascript?

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

Mastering them can take years, maybe not mostly because it takes a lot creative thinking, once you understand the language is mostly practice over and over until you keep getting the hand of it

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

@@diegoricci7662 Thank you for answering my question

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

@@erim2611 I've been here for 1 year and I know html, css, a bit of JavaScript and a CSS framework called Tailwind. I already know how to make designs and others in a very short time, I only need to learn JS in part of the interactivity and I tell you, I have not studied intensively. That's why I think I wasted a lot of time because I could have learned a lot more but even so I'm satisfied with the results, you can too! PS: I learned with videos on RU-vid and an android application called SoloLearn.

@Amanda-dr1pc 2 года назад

i like it too much, ur videos are so helpful thank , can u make some creative flex movie cards i need to know-how, thanks 🥰

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

Can you please make a Tutorial about a shop with product cards in the Website(Not ohne big in the middle) with Shopping cart and where you Finaly can pay. I Hope you can do this.