• Monday , 25 May 2020

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

Code Canyon



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

3d Ocean

Related Posts

16 Comments

  1. can you fined me
    December 27, 2019 at 08:23

    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 .

  2. Casey Ashmore
    December 27, 2019 at 08:23

    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?

  3. Glodid Hamuli
    December 27, 2019 at 08:23

    thank you very helpful

  4. Tomáš Mišura
    December 27, 2019 at 08:23

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

  5. Brenda L
    December 27, 2019 at 08:23

    one of the best teachers, never let people down.

  6. Chong Chern Dong
    December 27, 2019 at 08:23

    Straight to the point and easy to grasp. One of the best web programming showcases, thank you for sharing!

  7. Nia Daniels
    December 27, 2019 at 08:23

    so only if you press that button it will open?

  8. Yama Code
    December 27, 2019 at 08:23

    Can you please create more navigation videos. For example multilevel menus.

  9. Jarrett Yew
    December 27, 2019 at 08:23

    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

  10. Jaspreet singh
    December 27, 2019 at 08:23

    Sir please upload video crop image and compress size image in jquery .🙏🙏🙏

  11. Kosta Tsourdalakis
    December 27, 2019 at 08:23

    Mintttt!

  12. Bikram Chettri
    December 27, 2019 at 08:23

    Hey please, can you make a video on how to do a milestone counter when scrolled to that section?

  13. Paolo Curotto
    December 27, 2019 at 08:23

    Simple and easy, thanks dom!

  14. Max14211
    December 27, 2019 at 08:23

    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 🙂

  15. Bikram Chettri
    December 27, 2019 at 08:23

    Awesome Man

  16. vasanth t
    December 27, 2019 at 08:23

    Nice video man,please make videos on grid and flexbox man.

Leave A Comment

You must be logged in to post a comment.