Responsive Bottom Navigation Bar Using HTML CSS & JavaScript | Dot Bar Navigation

Responsive Bottom Navigation Bar Using HTML CSS & JavaScript | Dot Bar Navigation

In this video, I have shown you how to create a bottom navigation bar using HTML, CSS, and JavaScript. It has two layouts, navigation with icons and labels, navigation with icons and dotted bars.

📁 Assets

👨‍💻 Start project from scratch

🔗 Source code

🔔 Subscribe for more!

⏱ Timestamps
0:00 Intro Navigation Bar Labels
0:59 Intro Navigation Dot Bar
1:54 Project setup
3:16 Variables Css
4:44 Reset Html
5:43 Reusable Css
6:38 Navigation Bottom HTML
10:06 Navigation Bottom CSS
14:19 Sections HTML
15:32 Navigation Bottom Js
18:49 Media Queries
23:37 Minimalist Design Dot Bar
26:00 Final Project

☕️ Support me

💙 Support me by PayPal

👍 Thanks for watching!
Make sure to like + Subscribe For More! ❤

🎵 Music
Song: Classic by Joakim Karud

#responsivenavigationbar #navigationbar #navbarhtmlcss

[yo_mastermind]

The better you have, aside from your awesome work, is that you take your time to reply to all fans; this makes you, besides a great developer a better person. Please, don´t change, and thank you for your approach to the community.

[marcoseptian]

Many will learn css after this video. Salute.

[Terry-IOSW]

Came for the content, stayed for the dope tunes.

[d_starcode]

i learnt a lot...your way of writing code is an art...i could have made the website but with a messy code....please dont stop making videos...

[adarshrai]

I encourage my friends to subscribe this beautiful channel ❤️👍🏼

[LarsRyeJeppesen]

Amazing. Converting this to Tailwind, thank you

[ultrAbdu]

Very nice, i waited for this one, thank you so much, god bless you and your work, you're amazing!

[komapikir]

hello i am from indonesia, i like your chanel

[peteromotosho]

Thanks for this man! Your works are wonderful

[r.maryemkitchlew]

Thank you so much man, you’re such a kind hearted, smart and you’re really good at this man, thank you for taking the time to make these videos, they help a lot, may God bless you.

[eduardoucles]

Lo mejor que eh visto hasta ahora, Sigue asi... Is amazing.!

[Deus-lo-Vuilt]

Nice, thanks for video, more videos pls

[devcj]

I would need this, thank you so much!

[omegaside]

Great work. Therefore instead of using 100vh I suggest to use 100dvh which will response to mobile phones app UI.

[playmambo]

¡Gracias por compartir tus conocimientos y habilidades!

[sachin-singh-]

Thanks for the tutorial, btw whats your country?

[luiszavala]

I like it your job. Are you from Perú?

[mathyucardozo]

Wow super bello y genial, estaré esperando que saque el portfolio completo. Espero sea de código abierto, like 🙌❤️

[mrinmayeesarkar]

I really need a help. My sidebar is on left side vertically, how to position it at bottom?

[Dheimoz]

As always, great job. Very elegant and clean. What is your take on tailwindcss? Cheers.