Create a Navigation Bar with Icons – HTML, CSS & JavaScript Tutorial | Web Design




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”

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

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

  3. 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 🙂

Leave a Reply