Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; COUNT_CLASS has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/functions.php on line 1713

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; sidebar_generator has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/plugins/multiple_sidebars.php on line 29

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_video_widgets has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/video.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_soundcloud has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/soundcloud.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_counter_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/social-counter.php on line 9

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_news_in_pic has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/new-in-pic.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Flickr_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/flickr.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_fb_likebox has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/fb.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_google_follow has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/google-follow.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_popular has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/popular-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_recent_posts has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/recent-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_cate_posts has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/category-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; tabs_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/tabs.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_youtube_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/youtube-subscribe.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_social_links has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/social-links.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_comments_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/comments.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_author_bio has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/bio-author.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_login has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/login.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_search_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/search.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_120_600_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads120.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_125_125_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads125.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_250_250_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads250.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_300_300_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads300.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_tweets_load has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/twittes.php on line 10

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; feedburner_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/newsletter.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_related has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/related.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_slider has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/slider.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_top_rate has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/top-review.php on line 6
Create a Navigation Bar with Icons – HTML, CSS & JavaScript Tutorial | Web Design | D4mations.com
  • Thursday , 28 January 2021

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.