How to Create a Bottom Icon Navigation Menu - HTML & CSS Web Design Tutorial

Link to Source Code:

In this video tutorial I'll be showing you how to create a bottom, icon-based navigation bar using HTML and CSS. This style of navigation is very popular on mobile apps or websites.

Google Material Icons:

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[Lokesh]

even tho its 3 years u never gave up till now
nice explanation and arigato

[yashsingadiya]

First time I felt that
Even I can also learn and understand css
Your explanation made my day 👍
Thank you so much for this much help
With source code you are the only one who has helped this much 😊

[johnstarz]

Also good to add for .nav is a z-index: 1; so content dont overlap the navbar. I had that issue

[hackerprime]

Hey thank you for this. Just incorporated this into my web application.

[AkashRodge-ri]

instead of transform, is it good practice to use visibility : none and visibility :visible?

[testwhwhja]

how can we change the container when someone click on bottom nav item
using a div and change display style in js ??
can you make a video about this please

[iamakinola]

please how can i refer each button to a destination link like, dashboard to dashboard link page. and also, where will i paste the two come on my admin panel or cpanel??

[kwhandy]

do you have any idea to make it wearing something like bootstrap container? when it streching into more than 13" screen, mine looks horrible

[ahmedrezwan]

It's help me a lot.btw thanks for your great video ❤️

[BobbyBundlez]

what about mobile when the search bar is included and fucks it up?

[immynoida]

Sir how to copy paste .. in my website html from base .. becuase code snepet is just showing half code

[skhanjani]

with this code it show in all size of site. how we can fix it hust show in mobile size?

[sosscs]

How to make the nav bar be invisible on desktop browsers? there's still the bottom white area on desktop

[레고인간-jc]

thank you bro from south korea 고맙습니다.
[김치, 한복 은 한국의 문화유산입니다. ❤, kimchi, hanbok is korea traditinal culture.]

[sakarsr]

Wonderfully explained. Good work, keep going. Good Health and God Bless you.

[georgesunnyt]

Do you know how to make this work properly on safari mobile? Also on android, it causes nav bar to rise up when keyboard comes up

[kaludharajeeya]

I can use this code in my website without copyright !

[alejandroatencio]

¡Maestro! no se de cuantas maneras puedo decir que el aporte que hace es grandioso! Le doy mil gracias, una pena que solo pueda colocar 1 like nada en lugar de mil like! Saludos cordiales y mucha fuerza.

[sadeghhosseini]

What happens if the content of the page is too long, doesn't the navbar overlap the content?

[BonsaiMagic]

Hi if you click on the active link how can you make it to stay on the color without creating individual pages ?