In this video we’ll be creating a stylish navigation bar with icons, using plain HTML, CSS and JavaScript. The icon library used will be Google Material Icons, which you can read the documentation for here:
https://material.io/tools/icons/
To include Google Material Icons on your web page, add this to your head:
https://fonts.googleapis.com/icon?family=Material+Icons
Support me on Patreon:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!
Follow me on Twitter @dcode!
If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!
#dcode #webdev #css
Original source
16 responses to “Create a Navigation Bar with Icons – HTML, CSS & JavaScript Tutorial | Web Design”
it works !!! but there is a prob .
the links wont work .
can you please ,help.!
its for a school project Friday .
and thanks for the video i learned a lot .
I’ve followed this very carefully and it never looks like yours do 🙁 at the start there was a massive gap between 2 of my icons and idk how to fix it 🙁 do you have a video you recommend to watch first to get the grasp of everything?
thank you very helpful
This video is awesome, very useful tutorial. I was thinking to use somethinhg similiriar in my projects but I have changed my mind. However this video is definetely useful for anyone….
one of the best teachers, never let people down.
Straight to the point and easy to grasp. One of the best web programming showcases, thank you for sharing!
so only if you press that button it will open?
Can you please create more navigation videos. For example multilevel menus.
Thanks! At last there's proper sidebar implementation video out here. Have been searching for quite some time. Could you go a little bit deeper like 1) adding nested link upon clicking 2) when sidebar is closed, instead of closing fully, it shortens the sidebar to icon only. Example like this one: http://bit.ly/2UMOJUU
Sir please upload video crop image and compress size image in jquery .🙏🙏🙏
Mintttt!
Hey please, can you make a video on how to do a milestone counter when scrolled to that section?
Simple and easy, thanks dom!
Hey dcode long time fan.
I was just wondering any chance you could make a vid on how to code a vertical scroll page with plain JS. Kinda as seen in the Photography template by Revolution slider (URL: https://revolution.themepunch.com/wordpress-photography-slider/). I have been trying to figure out how to set it up so that when you start the scroll event the new div comes into view and the old one goes away and getting it to work on multiple divs each with a different nested styling. IDK just couldn't really find alot about it and wasn't sure where to go to find out lol.
Thanks either way your videos are awesome keep it up 🙂
Awesome Man
Nice video man,please make videos on grid and flexbox man.