Easy Responsive Dropdown Navigation for Beginners with HTML & CSS | Responsive Web Design Tutorial

In this easy responsive dropdown navigation tutorial, I will teach you how to create a responsive menu using HTML and CSS, which also have a responsive drop down menu that works on mobile devices. Responsive web design and mobile-friendly navigations are really not that difficult to create, if you break it down step by step. And hopefully you will find my simple responsive dropdown navigation tutorial easy and simple to follow. 🙂

➤ LINKS

➤ TIMESTAMPS

00:00:00 - Introduction
00:06:44 - Download my lesson material
00:07:12 - Let's get started! :)
00:08:32 - Fonts and images used
00:10:24 - Creating the HTML
00:18:56 - Creating the CSS
00:42:44 - Making everything responsive!
01:14:06 - Toggle the menu with JavaScript

➤ GET ACCESS TO MY LESSON MATERIAL HERE!

First of all, thank you for all the support you have given me!

I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!

I am now using Patreon and YouTube Memberships to share improved and updated lesson material. You can access all the material either from my memberships or Patreon, depending on your preference. I have worked hard, and done my best to help you understand what I teach.

I hope you will find it helpful :)

[dewminator]

Loved this entire course! Started from very basic HTML/CSS understanding to some good solid foundation now. Thanks a million for providing this content. The nearly 500k subscribers are well deserved! Keep the content coming (please) 🙂

[jordan]

Thank you so much for this I can finally understand how these things work. :D Literally the only person who tells you how stuff works in CSS.

[yousifky]

imagine if Dani make JS course.. that will be the most perfect & great tut in the internet

[DevinGeegh]

Great Course of HTML/CSS!!! I've been through all the videos and had to rewatch some of them to grasp the concept. The way Dani explains things you end up getting it the first time though. My suggestion to anyone watching Dani's Videos is to start from the beginning of the course and go through it all, many great hints and shortcuts to make your programing easier!! Awsome Job! Thanks Dani!!!

[coldblf]

idk what to say mate i follow this tutorial from the beginning and guess what i did some exercises like creating some designs i found fo websites and im surprised it was ez the way u explains things is just diff from the other thank you soo much and sry for my bad english tho

[TrinityBaptistChurch-spfldor]

when you did you hover it covers your gallery page. how do you drop it down so you can still see the gallery page?

[adrianguadalupemunozjaureg]

Awesome video, this is exactly what I needed. Thanks for all the knowledge!

[Makksse]

Ay nice to see a new video from you. Just finished the PHP OOP course, it was amazing!

[acidburn]

absolutely wonderful! And it works even for me!! ♥ Thank you so much!

[innoutfunforeveryone]

hey great...how can make the drop down with 6 columns and 6 rows

[claudiuswagner]

Very nice tutorial as usual! BUT a question to CSS. VSCode gives me always the message: "Do not use width or height when using padding or border in css!" So why is that and why you're doing it opposite. Would be nice if you could give us a statement on this. Thx!!!

[JLPTMeeva]

You put display block on the anchor tags, but doesn’t display block usually force the content next to it onto a new line? I’m confused about that

[brianjett]

Will this work if I should use a display flex in the body and flex-direction: column? I like to put the footer on the bottom. I'm kinda busy right now to watch your video now.

[aa-xnhc]

You should say upfront whether it is Bootstrap 5, and is not, what mobile browsers are compatible with your custom solution

[rondajones]

I’m trying to get lesson materials but I don’t understand how

[arabanu]

How can i make it that my browser is adapting the website while dragging it with the mouse? Like in 41:12 . I can only see adapt it after i let go of the drag with the left mouse button. If anyone know, your help would be nice thanks!

[Sharp]

THANKS, i’m making a website where my family can look at old pictures and i need to sort who’s in each picture😭

[Konstantinosiakovou]

Strange things happens. I rewatched the video step by step but responsive menu can not be. For example the menu is not listed at mobile vie

[themauritanian]

Dani Can create tutorials videos About Figma

[dave]

Is the new PHP tutorial series going to continue?