Responsive Navigation with Hamburger Menu - CSS And JavaScript Tutorial

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

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

50% 1

👉 Daily Coding Challenges: iCodeThis.com/?ref=ytb-nav
In this tutorial we're taking a classic navigation and we're converting it into a Responsive Navigation using #CSS and a little bit of #JavaScript.
We created this landing page in this live stream: • Live Stream - Coding a...
---
Follow me on:
📃 Website/Blog: florin-pop.com
👉 Twitter: / florinpop1705
👉 Linkedin: / florinpop17
👉 Instagram: / florinpop17
👉 Facebook: / florinpop17
👉 Github: github.com/florinpop17
👉 Dev.to: dev.to/florinpop17
👉 Twitch: twitch.com/florinpop17

Наука

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

4 фев 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@heshboi 3 года назад

Took me a while to figure out I needed to import the font awesome icons url. Kind of an important step you missed out there.

@TheTriangle444 3 года назад

Thanks for the heads-up. I assumed the fas thing was included in the bootstrap CDN link. Big miss on this one

@pakshaljain316 3 года назад

This was exactly what I was looking for. This tutorial is very simple and not very complicated like others out there

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

Literally a life saver of a video...I have really bad professor, who wouldn't care to explain anything and this 7 min video, taught me more, than him whole semester...

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

This is exactly what i'm looking for. Simple, clear and on point details. You explain everything that you do. I instantly smack the subs button. Thanks man. Keep it up

@sarahhodges8772 3 года назад

Thank you so much--I read many different tutorials and this was so clean and straightforward and perfect. I was able to get the look I was hoping for on the first try. Thank you!!

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

Thank you so much for the tutorial Florin! It was really helpful and above all, so easy to follow through.

@danielcir8675 3 года назад

hey Florin, I checked out a dozen other tutorials on the matter, yours seems to do the job in a simpler manner but retaining beauty. Thanks!

@hegyilevente221 3 года назад

I was stuck for 3 days because when i clicked the menu and my side bar disappeared, after i maximized the window it didn't came back. With this solution everything works just fine. Thank you! Definitely subscribed!

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

i tried so many methods to create this but your method is so straight forward and easy

@madihamufti 3 года назад

Thank you, easy, to the point and simple -glad I found this channel "SUBSCRIBED" :D

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

Dude, you explained it as easily as 1,2,3 Thank you, bro!

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

One of the most concise video, loved the content 💜 After completing the video, I realized that my codebase is not messed up, it's just like yours 😄

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

You have made an amazing job with this explanation, thanks a lot!!! It was very easy for me to follow along each step.

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

Thanks dude, very simple to follow and understandable!

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

i love you, you saved my life! such an inspiration

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

Dude you're a legend for this simple explanation

@demian5511 4 года назад

Nice work man! Keep it up. Very clear and up to point. Great channel. I hope it will grow soon!

@FlorinPop 4 года назад

Thanks man!

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

I've seen another video that the JS had something like 130 lines lmao. Your video are so simple and understandable. Thank you so much!

@mariska7306 3 года назад

hi this might be a dumb question, but where in the html file do you include the javascript (i believe it was something with ). thanks for the help!!

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

Thanks for the great content.. Does this allow you to animate the change? I noticed you didn't set a specific height for the nav ul

@busarihassanat5755 3 года назад

Thank you for this video, really straightforward and simple code

@gokuusan9931 3 года назад

Thanks dude you explained much better than my teacher.

@rexyou7188 3 года назад

Hi sir, do you have any videos about this navigation bar animation (such as closing, fade-in/fade-out etc)?

@jandzhemesjuk5734 3 года назад

Thanks man! A very clear video

@iidotz5351 3 года назад

Appreciate the simple tutorial

@chickenpotato3791 3 года назад

you savin me big time man! thanks for this wonderful videos, just earn yourself another subs

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

Nice tutorial. Very easy to follow, and implement

@RusticTravelJunkie_original 3 года назад

Love from India... Amazing videos bro!!! 👌

@khaldounal-nuaimi3594 3 года назад

this video helped me a lot, thank you!

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

Thanks. This was really helpful

@EkelundDK 4 года назад

You and Brad Traversy are without a doubt my favourite web coding channels.

@FlorinPop 4 года назад

Very happy to hear that 😃

@Ziiser 3 года назад

This is great, thanks! I just have one question. How do you make the menu disappear when you click a menu item?

@michaelsnow2839 3 года назад

This channel is amazing! You are great man

@FlorinPop 3 года назад

Thank you so much 😀

@tiffnsound7815 4 года назад

Your videos and explanations are fantastic. Happily subscribed and will recommend your channel to any looking to get into CSS.

@FlorinPop 4 года назад

Thank you 🙏

@MarketingCiprian 3 года назад

Best video ever for navbar and hamburger

@michalzavadil949 3 года назад

Great tutorial, helped me a lot

@dandividend2703 3 года назад

Hi Florin, Thanks for sharing this video, I made sure the script was at the bottom of the page just over body. But the toggle still wasn't working

@TheTriangle444 3 года назад

If the hamburger doesnt appear after you entered the code, you need to go to fontawesome (dot) com, type in your email, and go back to the website to get the code from there. It will contain the hamburger icon.

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

I tried using "

@patrick.1943 2 года назад

Hi, how can I add a smooth transition to it?

@rahman-thecomputerguy7045 4 года назад

Concise Explanation 🔥

@toxic715 3 года назад

thanks for the help man i appreciate

@12afaelpereira 3 года назад

Is there anyway to make that the menu don't push elements after it? I mean, when click on menu icon the menu pushes the page down

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

I've typed out my html before my ul, . A hamburger icon is not showing. Any ideas? The image for the logo before the ul is wrapped in a div for flex purposes, in case that matters.

@jm.101 2 года назад

Thank you! Was stuck on this all day. What I was missing was doing display flex on `.nav-ul.show{}` instead of just `.show{}`. Without the extra class name, that burger icon never shows back up on resizing to large screen.

@armelivanbado2046 3 года назад

For those of you that are getting a null error, try to put the script at the end of your body element

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

Thanks a lot man! :)

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

Excelent video as always!!!

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

Thank you 🙏

@TheTriangle444 3 года назад

If your javascript console says something about null, try putting your inside the bottom of your html body

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

THANK YOU! The menu wouldn't display, and I was getting an error message in my console about Hamburger being null. I moved the JS link just before the closing 'body' tag. Now it works!

@johnxisde 3 года назад

Thank you alot!

@shahzadmujtaba1725 3 года назад

Awesome tutorial

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

I thank you for the upgrade.

@richiemawunyo5493 3 года назад

Great job champ.., can you please drop the full video link here?

@azomkhan9452 3 года назад

Effective video. 💗

@fuesto 3 года назад

Thank you very much for you time and your effort. Ace

@FlorinPop 3 года назад

Thank you for watching ☺️

@matheussilveira7935 3 года назад

Thx man, u made it pretty simple. COME TO BRAZIL

@rickyanchores4464 3 года назад

GREAT!!!

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

Thanks for help

@ander172 4 года назад

Hi, do u have somewhere to download sourcecode ?

@sayurikamble825 3 года назад

@florin Pop Uncaught type error : add event listener is not a function. Getting a error something like this 👆 Please anyone could help ?

@gustavocavalcante1607 3 года назад

same thing happened to me :`)

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

THANK YOU

@abdifatahmoh 4 года назад

Can you please do more JS small component projects that covers DOM Manipulation just like this project?

@FlorinPop 4 года назад

Sure 😃

@thecoderraj3777 3 года назад

Thanks sir 🙏😊🙏

@shazbaz5695 3 года назад

Can you please do mobile-first approach on this please?

@nikolaradovanovic4883 3 года назад

It there a source code on github or anywhere?

@EkelundDK 4 года назад

I've tried to make this, but nothing happens when I click the button, and the browser console says "TypeError: hamburger is null" at line 4 :-/

@FlorinPop 4 года назад

Do you have the button with id of hamburger? Did you put the script tag at the bottom of the HTML file so that it can load after the button loads?

@EkelundDK 4 года назад

@@FlorinPop Thank you so much! The problem was, that the script was in the head-tag. I don't know how I've missed that, but I moved it to right over the and now it works! Thanks again, for the quick and precise reply :)

@ashleysouffrant1320 3 года назад

@@FlorinPop Guys I've been having trouble with this for close to an our now! Thanks to both of yall, I'd be stuck for days my tag wasn't at the end.

@MuhammadIrfan-rm1ok Год назад

How do you connect your external javascript to th e html file properly?

@FEJBAJK Год назад

to the end of tag

@noah6122 3 года назад

thanks man

@TaxEvasionAnyPercent 3 года назад

I've tried it on another project, and now on a blank html file and it does not seem to work... I have rewatched the video about 5 times, it's all just like in the video. I even renamed classes to match the video but its still not working... The removal and appearance of the menu icon and the menu items works, but when i click the menu icon, nothing happenes...

@TaxEvasionAnyPercent 3 года назад

Fixed it, script has to be run after page loaded, defer in the script tag or place it behind the html

@zihadhosan23 4 года назад

awesome!!! It would be more better if you used some nice smooth transition. But still you did great job. Wish you good luck.

@FlorinPop 4 года назад

Transition would have been nice indeed! 😃

@luffytaro5275 3 года назад

How to slow the toggle??

@alexhitchins4339 4 года назад

@Florin Pop could you make a video with animated dropdown using JS?

@FlorinPop 4 года назад

Yes

@MaxProgramming 4 года назад

In which video did you make this webpage?

@FlorinPop 4 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-069NlLdB4dM.html

@FlorinPop 4 года назад

There was the link in the description 😊

@MaxProgramming 4 года назад

Thanks a lot

@carlosdiazplaza1690 3 года назад

can you share the source code link for the whole thing?

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

This javascript is not working in my html file. can anyone help me

@karysd8468 3 года назад

I don't know if you will see this but the hamburger menu does not show up on my screen at all!! Any ideas??

@TheTriangle444 3 года назад

you have to go to fontawesome dot com, send your email and confirm it, and from there it will give you the code which you will need to copy in your html. the hamburger icon comes from there. he forgot to mention this

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

Its quite confusing on your html n css u have nav-ul but on your JavaScript you have navUL on both class n id. Please clarify

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

NavUL is the function name. It doesn't matter what it's called, it's just for your reference when creating functions. The ID he's tagging is document.getElementById('nav-ul')

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

when i added the show class, it didnt work

@toyinatofarati5512 4 года назад

Nice video sir... Can you please zoom in next time so we can see the codes clearly. Thank you

@FlorinPop 4 года назад

It’s zoomed in 3 times. Can’t make it bigger otherwise it will be too big and you won’t be able to see the entire code properly.

@toyinatofarati5512 4 года назад

@@FlorinPop Ok sir

@iUmerFarooq 4 года назад

In whole design, I only worried about the *Hamburger Menu* So if you never mind kindly create different video on Nav Bars! Thank you for your time.

@FlorinPop 4 года назад

What should we use instead of the hamburger menu?

@iUmerFarooq 4 года назад

@@FlorinPop Bro make hamburger menu but try to make a different type of menu with different animations, style, and design?

@FlorinPop 4 года назад

Umer Farooq noted

@nowyouknow2249 3 года назад

💪💪💪👍

@sahassaurav4144 4 года назад

Manage landing page from frontendmentor in upcoming live chat

@soondar3187 3 года назад

Checkout this playlist you will find almost every type of navbar ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-06UtXZo78ng.html

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

Крутой ролик

@OseiThibert 3 года назад

I would pay you to build me one on my site. im really lost I use divi for Wordpress

@shivamkala 3 года назад

Can you do 10 different types of commonly used navabars in 1 hour??

@FlorinPop 3 года назад

I think I can

@shivamkala 3 года назад

Thanx florin! I have started learning front end and I know the basics of html and css. But I stuck at designing navbars if you do this challenge it will help me a lot. Secondly I want you to explain position and zindex with different practical examples in your upcoming next video