Responsive Off Canvas Sidebar Navigation With Dropdown Menu | HTML and CSS Tutorial 2019

AVOID THIS SITE – I signed up to have my domain and email addresses changed. I was told that it would take 24-48 hours for the transfer. 35 days later, it’s still not done, but they charged me immediately. When I called to ask why the transfer was never done, they had no answer. Gurinder Kaur, Australia,

In this video I will show you how to build a simple responsive off canvas navigation bar using HTML, CSS, and JavaScript. Make sure that you subscribe and turn on bell notifications so that you never miss a video from me!

Don’t forget to like, comment, and subscribe!
More from me:

Disclaimer: To save time, I rarely include css vendor prefixes for cross browser compatibility. If you plan to use this code please make sure that you use a prefixer.

Want to set up your own website?
Get affordable domain and web hosting service by HostGator (Affiliate link):

Save up to 60% off with coupon code:


Video tutorial on how to purchase a domain and hosting plan. Also, how to launch your website online:


Contact info:

html,css,css menu, html menu, css3, html5, css side menu,css3 menu,collapsible menu,hamburger menu,website menu,responsive menu,responsive navigation,responsive website,responsive css,responsive website,sidebar menu html,css dropdown menu,responsive design,responsive web design,how to create a dropdown menu,how to create a html dropdown menu,create a website dropdown menu,drop down menu,dropdown menu,dropdown menu tutorial,drop down menu tutorial

Coding with Julio

  • Bikram Chettri
    Posted at 12:17h, 08 April

    good one

  • AV G4
    Posted at 16:59h, 08 April

    good job

  • Coding with Julio
    Posted at 17:55h, 08 April

    Sidebar navigation are generally mobile friendly which is why I said "Responsive". As long as you keep the styles shown in the video this sidebar menu will look good on mobile devices as well.

  • Patrick S
    Posted at 06:57h, 09 April

    checked everything ten times, getting Uncaught SyntaxError: missing ) after argument list 🙁

  • Khin David
    Posted at 12:10h, 09 April

    This was dope. I cant wait for more projects website. Will u be adding more content with the website u made? Or making a whole new site.

  • M3CV1NO
    Posted at 18:32h, 09 April

    I like your Tutorials keep up ^____^

  • thecrithit
    Posted at 21:45h, 09 April

    Great tutorial once again. Keep up the magic 🙂

  • Rod Smith
    Posted at 23:47h, 13 April

    I've been a subscriber for a short time now, I keep watching, because of your style of tutoring. Keep up the good work 🙂

  • Ruckaiya Abdul Wahab
    Posted at 07:48h, 08 May

    hello sir,
    what will be the changes in the codes of script if I've to hide and show dropdown on click for more than one nav item?

  • Maksym Yankivskyy
    Posted at 11:12h, 08 May

    very cool video thanks you !!!!

  • AllChaos
    Posted at 16:32h, 09 May

    I have a question, instead of putting that bars in the middle of the page , can I put my needed text instead? and if it is so, what I need to use?

  • Yong Jun Jung
    Posted at 21:39h, 07 June

    Hi, Juilo. I am trying to make the dropdown menu to have a transition. I tried playing around with height but the unordered list does not seem to like having the height. How would you achieve this?
    Thanks as always!