How to create a Responsive Navigation Bar (for beginners)

👉 Get the best web hosting to deploy your websites: www.hostinger.com/coding2go
✌️ Use our discount code CODING2GO to get 10% off on all web hosting packages with a duration of 12 months or more
👌 Check out our HTML & SEO course on udemy: www.udemy.com/course/coding2g...
Source code on our website 👉 www.coding2go.com
In this video we are going to create a responsive navbar together. I am going to explain everything you need to create a responsive navigation bar with a hamburger menu and a sidebar with a close button using HTML, CSS (Flexbox) and JavaScript. You will learn basic DOM-Manipulation with JavaScript and how to use CSS Flexbox to align your navbar horizontally and vertically (as a sidebar).
#responsive #navbar #javascript #webdevelopment
background image: unsplash.com/photos/m_HRfLhgABo
google icons: fonts.google.com/icons
CONCEPTS YOU WILL LEARN:
✔ HTML, CSS, JavaScript
✔ Responsive Webdesign
✔ Flexbox Layouts
✔ Media Queries
✔ Google Icons (Hamburger Menu, Close Button)
ABOUT THE NAVBAR:
The basic Navbar is created in HTML and CSS
To make it behave differently depending on the size of the device that the website is being displayed on, we have to make it responsive. In the mobile view most of the links are hidden and accessable by clicking on a menu button (hamburger menu icon). It will expand a sidebar that uses CSS Flexbox to align the navigation links vertically. The sidebar has also a glassmorphism design to make it look like glass using the backdrop-filter property and the blur() method. To open and close the sidebar, we use google icons menu and close X. Using simple JavaScript DOM-Manipulation and the onclick Attribute of the Icons we can open and close the sidebar.
RESOURCES for better understanding:
HTML Tutorial: • Learn HTML in 15 Minutes
CSS Tutorial: • Learn CSS Basics in 10...
FLEXBOX Tutorial: • CSS Flexbox Tutorial f...
GLASS Effect: • Create a glass effect ...
like and subscribe if you read this 👍

[@coding2go]

Hey there, the source code for the project is available on our website
👉 www.coding-kurzundknapp.com/coding2go.html

[@nahin1968]

bro you are so good at explaining 🙏

[@AjibadeLateef-mw1fq]

cool

[@shingieplays8745]

this is by far the best tutorial for a navbar on the internet

[@user-dx6gz2bs1d]

Bro you just saved me I've been searching for videos explaining what you just did and yours is by far the best thanks bro

[@25Manzambi25]

Finally a great tutorial where you just go straight to the point.

[@princearya4208]

VERY CLEAN & TO THE POINT VIDEO.

[@saddamwassan897]

you've defined it very smoothly and clearly thanks man.

[@memoryclips.moment]

This tutorial is the best of i have seen on this topic you are relly great at teaching be consistent you will be the one of the best teacher out there i relly appretiate👍

[@bisaanimations]

I've watched a few tutorials on learning various responsive design projects, like navbars, websites, forms etc.....this is by far one of the best i have seen. I shall definitely be learning more from your videos in the future! Thanks for being so clear and easy to follow/understand.

[@mike-480]

Really good. I always wanted to fully understand how this was done at the basic level. And your teaching is great. Not done on the fly, but every word fully scripted out perfectly with no mistakes.

[@blairdog2581]

Thanks! you saved me a bunch of time and It finally clicked for me how html/css utilizes javascript.

[@triviahaven2853]

Thank you for this tutorial. I've been searching for the easiest way to integrate this hamburger menu in my website. Now, I was already able to to it as simple as that. Thanks again. You deserve a subscribe!

[@shanuanxari2216]

I watched a lot of videos but this one ❤❤❤

[@user-mb4hw7wt7i]

Thank you so much!
This is the video that gave me the proper explanation

[@maaintlovantakalu]

thank you so much. i had a problem of horizontal scrolling. now its solved

[@Lavenderfields1723]

Very very nice! I found it really useful for me. Thank you so much!

[@truefacts7369]

supper excellent sir. i scrolled down the whole youtube but didn't get video like this. Really amazing. love from pakistan

[@goblin_gibs]

This is fantastic, its simple and easy to follow, thank you so much!

[@droneit7961]

cant leave without saying thankyou!

[@samyakbharsakle7283]

you should keep making these videos bro
i've never seen anyone else explain things this cleary

[@TafsiirTV]

his explanation is good and understandable

[@user-fj9un8uc7z]

The best navbar tutorial

[@estherolajide1487]

The best tutorial so far❤❤❤

[@JunieVM]

Thank you for this tutorial, instead of using bootstrap this is the best alternative.

[@dimitryngayo9455]

Thanks for the video really helpful,I have been searching for where someone is gonna explain responsive on nav bar🙏. Thanks once more

[@razarajpoot9811]

Thank you very much for great explaination

[@user-lc9uq3ey5m]

Absolutely insane . It was quite easy to understand ❤❤❤❤

[@mhathunggeorge8082]

Amazing tutorial..just the video I was searching for. Thank you so much.

[@tutoro5567]

Great video. You are talented in explaining. Keep going, I believe you will have many followers )

[@FascinatingFantasy]

Watched so many videos about this and only this one worked.

[@Marceloamado1998]

Thank you very much this was exactly what I was looking for!

[@youssefelabiad3414]

thank youuu this really helped me a lot!!!

[@lxkgxgxktstd]

the key thing is you are talented in explaining.

[@easywebsolution7044]

Thanks, very easy to understand. it save my time

[@muhammetciviler1445]

Thank you. Its perfect, good job

[@CityGalleryIND]

Thank you man ❤

[@edokpolorjohn2121]

Nice one.

[@noshamezmez288]

thanks for ur effort ,i always have a problem how to make navigation bar responsive but now it become easy for me =D

[@xRuds]

Thank you. Looking for Admin Dashboard tutorial for next videos! You deserved a subscribe! Thumbs up! 👍🔥💯

[@MasterAless]

It really helped me, I pretty need this tutorial that much, thank you bro

[@Arijitsinghworld1M]

Yes I did with you ❤ my first tutorial to watching easily thanks man great job
Please make lots video to others topic .

[@godwinoyale3550]

Best tutorial ever.

[@M_H_Cricket]

thank you so much. Wonderful tutorial

[@paradise2527]

Very informative. I subscribe thanks to you man. Keep uploading videos it's a great help

[@srinivaspagidi5764]

I love this video
Thank you so much

[@Black_30-ur2ew]

Thanks Brother.

[@TirthJoshi-qy8mv]

Very Useful!! Thanks

[@angelolobascio6608]

Fantastico...bravissimo 😉

[@richardmerks1344]

Your explanation of this tutorial is fantastic, I edited my website while you where showing each step, pausing as needed to check my work and everything fell into place as it should.
Strangest thing though, I use notepad to edit the code and Firefox to view the changes (as I always do) and had no issues, uploaded the files to my website host and check the live version on Firefox (my usual browser) and yes it is up to date, the links where all sitting over to the left with bullet points the "hamburger" and the "X" sitting on top and bottom of the links, very weird! lol.
I check my site on MS Edge on my laptop, Firefox and Safari on my iphone and it all worked great, Even weirder!
I'm sure there has to be a string of code that will allow FF to view my site as it's intended?
I initially was looking for a floating anchor tag that took my page to the bottom where my links are but when I saw this, that idea went right out the window, this nav menu is far more professional, Thanks for all your hard work.

[@alpgashi4810]

THANK YOU A LOT

[@muhammad_zohaib936]

Thanks sir 👍❤

[@hertechera]

This is great, thank you

[@truthvfiction]

Very nicely done. For this cool navbar to be persistent across pages is it fair to assume it will be in a ?

[@CodeXtream]

I know English little bit but your explanation is awesome 😎😎

[@HowToSandAFloor]

omg this is exactly what I wanted 😂 thank you

[@alanali9645]

thank you brother

[@NedumEze]

Thank you very much. Would be wonderful, if you would make a similar on with multilevel dropdown menus

[@ahmedghallab5342]

شكرا Thanks it was helpful

[@randomlol472]

Great video, thank you so much!

[@akejeludavidojoshimite646]

this was super good. Thanks

[@RehaanHussain-xw5cy]

Thanks bro

[@djamilacorreia]

It helped a lot thank you 😄👏👏

[@malekbzd8086]

Thanks bro 🤝🦾
Really good explaining !!

[@Sneha_srishti]

Thankyou 🙇🙇

[@Ricky_017]

Great tutorial....... explained very nicely

[@user-xl5rx8ro1s]

thank you

[@bigonhim14]

This is indeed a very good tutorial

[@acharyapranoy]

thank you sir .. you saved my life
what if i want the toggle menu button in normal aspect ratio also not only in responsive ratio

[@mukherjeejeet]

thanks man, learned a lot

[@user-iy4sr3qk2c]

Thanks

[@tabeshomari-ck9tf]

that was great illustration bro

[@chase4972]

Thanks so much......

[@user-yk2fn9ow5t]

Wow Nice!!! Thank you!!!

[@aminalwamba2007]

great explanation

[@RobinSingh-wk8qv]

Nicely explained ❤

[@xamle6523]

very well explained, i subscribe!

[@jvav]

clean and ez

[@lenkadzn2951]

thank you, such a great lesson for begginers.

[@coding2go]

Glad to hear you liked it 😊

[@ayeshasiddika1252]

thank you for the video

[@LalitKumar-ts5tq]

Very nice explanation👍👍

[@musicalatina8681]

Thanks a lot!! 😊😊 Its Really usefull and easy!!! Please More JavaScript like that!! 😅😅😅 😂😂

[@YashShah-dg2nw]

Amazing😀

[@bobbetsagnut]

Using display: none in the media query did not work until I added display: none !important. Not sure why but now it works

[@anwarneja3642]

Very very good expalnation keep it up

[@_EngrTee]

Short and easy to understand if you’ve had a little prio knowledge with HTML, CSS & JS

[@TH3G3N3S1S]

Hello @coding2go i have a question.I made some changes to the css so that the sidebar is always visible and only when its in mobile-mode there is a hamburger menu. Now i want to put several boxes next to the navbar. But when i try that, the boxes are behind the navbar. What can i do to fix that? In the mobile version everything works perfectly, just the desktop version doesnt. Btw i really love the design of the navbar, the blurry effect looks really good!
EDIT: well i kinda managed to make it on my own which i guess is better for the learning experience, but somehow the blur effect isnt working anymore... ok i did it xD

[@saidabdelrhman1234]

Awesome 😊

[@baritonek]

Super
Thanks

[@routzz]

Thanks sir🙏❤

[@abubacarrjawune4210]

Amazing

[@aliuabdulmanaf353]

GOOD!!!!!!!!!!!!!!!!!!!!!!!!!!! I love it

[@Robert-gr1cl]

great tutorial, it helped me a lot thanks

[@rifathasan-pl7pn]

Great video

[@GerryDanen]

First, I like your tutorial.
Second, I have a question.
@media (max-width: 800px) does not work on my phone. window.devicePixelRatio = 3.375, window.screen.width = 320, and the max-width breakpoint seems to be 1080.
However window.devicePixelRatio can vary from one device to another. So how to write @media queries?
Thank you!!!

[@tubatootingraham8123]

great tutorial

[@HuiHuiiiiiiiii]

This is so good. But there's a problem, if you toggle the sidebar on small screen and start resizing screen, it won't automatically hide until you click on that cross button.

[@ayanTheDeveloper]

that's a fine video.subscribed!

[@coding2go]

Thanks! Welcome to this channel.

[@TechnowulfTV]

Hi Thank you for the excellent responsive navbar tutorial! You make it look so simple. However Im having problems why when I refresh the sidebar appears even when it was declared display:none in the .sidebar css?

[@TechnowulfTV]

I found the easier way heres the code just embed in your body tag and it will hide sidebar every time page refresh or loads :) Thank you!

[@omprabhakarkumar6550]

is any reason to put sidebar above main menubar links?

[@fasteditsyt]

I enjoyed this video!

[@user-zn5fc6mh1f]

Hey is this code available for use? I'm learning however this is everything i need

[@Coding_webx]

I dont like the tutorial! I LOVE it!!

[@IanGoodsman]

I thought this was great and followed, and understood, all except the svg code part at 9.04. This is something new to me and so I really didn't get how you rendered the items. I have downloaded the two items from the site you suggest. Hopefull you will be able to help me on this. Many thanks in advance.

[@coding2go]

I am glad that you like the video and I am happy to help you understand it better. The icons we have downloaded are svg files. An svg file is structured exactly like an html element. It has an opening tag and an enclosing tag . Therefore we can simply insert it into our HTML. It looks very complicated and long because the svg element has a lot of attributes. These attributes describe in the form of vector code how the icon should look like. We don't need to understand exactly how a vector path works because we can simply copy the code. To do this, you need to open the SVG file with a code editor and copy the entire svg element. Of course, we can also change a few of these attributes. The simplest attributes are "height" and "width", which we use to set the size of the SVG image. With the "fill" attribute you can change the color of the SVG. If we had used a normal PNG or JPEG image for the icons instead, we would not be able to change the color, which is why SVGs are better. But everyone can decide that for themselves. In CSS, we also used media queries to set the screen sizes and conditions on which the icons should be displayed. For example, the menu icon should only be displayed on mobile devices. We used JavaScript to code the functions that open and close the sidebar when you click on the li element that holds the SVG icon. I hope these explanations were helpful.

[@IanGoodsman]

Many thanks for that - all sorted now and looks good. Wish you all the very best. @@coding2go