How to Create a Responsive Hamburger Menu (Fixed Version) - HTML, CSS & JavaScript

Подписаться 15 тыс.

Просмотров 19 тыс.

50% 1

In this tutorial, you'll learn how to create a responsive fixed hamburger menu using HTML, CSS and JavaScript. This is also known as sticky menu.
Sponsor me on GitHub!
github.com/sponsors/miguelznunez
Follow my blog:
/ miguelznunez
Email : mignunez@csumb.edu
Medium : / miguelznunez
Codepen : codepen.io/miguelznunez
GitHub : github.com/miguelznunez

Опубликовано:

30 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@najeesimmons6648 Год назад

This was outrageously helpful. Hamburger menus have eluded me for a while now, but with your help, I'm finally able to implement them. Many thanks 🙏

@An-yh2bl Год назад

It was a really good tutorial, easy to understand and easy to follow. :) Thanks a lot!

@benzzzxlv2809 2 года назад

Im so grateful for this video thank you so much

@cyrilgavrosh4194 Год назад

Thank you so much for this video!

@velikorossnationalist4259 2 года назад

Good tutorial!

@kasunkumarasinghe6365 10 месяцев назад

thank you very much for teaching this so easy.

@zaurzada Год назад

Thank You bro

@Sloarot Год назад

Great tutorial thanks! If people have problems when the hamburger or the mobile menu doesn't appear: check if you added a space between .nav-menu/.hamburger and the .active part. I added a space and it didn't work. Remove the space and it does work. In other words .nav-menu and .hamburger should immediately be followed by .active!!!

@mefesto_ Год назад

Use button tag for hamburger. Why div? It have no semantic, no any roles. Button tag was created for this case.

@moto-bruh 2 года назад

very nice, what about a multi level nav?

@doogie1385 Год назад

Can you also add a mega menu? 🙏🏻

@SAL73VFX Год назад

Amazing, but If I want the responsive menu to move from top to down instead of left to right, what parameters I have to change on the code? thanks in advance :D

@warrickcrypto Год назад

Hello all you need to do is go to your CSS .nav-menu and delete left: -100; and change top 70px; to top: -100%; and then in your CSS go to .nav-menu.active and delete left: 0; and add top: 70px;