How to create a Responsive Navigation Bar (for beginners)
Вставка
- Опубліковано 29 вер 2024
- 👉 Get the best web hosting to deploy your websites: www.hostinger....
✌️ 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/...
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/p...
google icons: fonts.google.c...
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 👍
Hey there, the source code for the project is available on our website
👉 www.coding-kurzundknapp.com/coding2go.html
bro you are so good at explaining 🙏
cool
Dear when I wright the Java script on html the give me warning
im really appreciate when you make this video, this is very help me when i wanna make website, because im really struggling when styling my website because i really spend time just to make navbar whats gonna look like
Thank tou very much
this is by far the best tutorial for a navbar on the internet
agreed
Straight to the point !! nice explanation 😁 keep going brother
Very informative. I subscribe thanks to you man. Keep uploading videos it's a great help
Fantastico...bravissimo 😉
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!!!
thank you for the video
Thanks pro and how you can do copy in code in 1:36 minute of video in vs code!
It's a shortcut in VS Code: ALT + SHIFT + ARROW DOWN (on windows). This will copy and paste the line where your cursor is at below. ALT + SHIFT + ARROW UP will copy and paste the current line above.
thank you so much 🙏🙏🙏@@coding2go
Hey is this code available for use? I'm learning however this is everything i need
U can give transition for smooth effect it will look nice and cool btw great video ❤❤
what should be the selector for the smooth transition?
UA-cam should recommended this video for every web developer. Very short and clear.
⭐⭐⭐⭐⭐
All the others just be playing with code and wasting people's time.
When I add display: flex; to my "nav a" it makes all my text get pushed underneath the header?
I even copied and pasted your code and it still does the same thing? Is there something I need to download?
For some reason my list items (minus the first child) sit below the nav bar. I removed the height 100% and they moved into the nav bar. Why is my 100% not staying within the confides of the nav?
the sidebar pops up and blinks instead of fully displaying. how do i solve please?
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
Is there a reason why you don't nest under a tag with role=banner? It's a bit confusing with many similar tags and what's semantically correct.
Maybe based on the title of this video "for beginner"
Header is just section tag. Do nothing tag. To give you clarity of your code for other user's
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!
I watched a lot of videos but this one ❤❤❤
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👍
omg this is exactly what I wanted 😂 thank you
The JavaScript code to open the menu doesn’t work for me. The menu doesn’t open when I click it. Can anyone help?
The one thing I can think of for you to check without seeing the code is making sure the case of the letter follows suit with how he typed out the script.
There is an omission in the tutorial, the sidebar remains activated when you returning to the desktop version. To hide it automatically, you can use this code in the script tag
window.addEventListener('resize', function() {
const screenWidth = window.innerWidth;
const sidebar = document.querySelector('.sidebar');
if (screenWidth > 800) {
sidebar.style.display = 'none';
}
});
Thanks!! 🙂
do i add it to the javascript? because it doesnt work on my end :)
Finally a great tutorial where you just go straight to the point.
can someone explain body min height : 100vh? how does it work? thanks
Bro it's like let suppose we have a div and we want to set its height to 100vh it means that 100 height equivalent to it's viewport (v for viewport) means it will take the total height according to the viewport 😊
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.
Sir I got an error on browser console and can't fixed it... Please help me🥺
What does the error message say?
I followed the step-by-step instructions, and it worked for bravo to you guys I feel wholesome.
Great video
VERY CLEAN & TO THE POINT VIDEO.
I am really amazed. How you managed to teach this so well in 15 minutes tutorial. Thank you very very much!!
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.
Thank you for this! Now I'm going to learn this and build in my own way next time!!
Hola! Excelente vídeo!! Por fin alguien que explica las cosas como se debe, y además, FUNCIÓN!
Solo una cosa: cuando tengo la barra lateral desplegada, y le doy a algún link, la barra no desaparece… que puede ser?
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.
Thank you for taking time to explain each component of the code you created. This really helps for a novice web developer like me.
Glad it was helpful!
Edit: I finally fixed it. For the sake of integrity, my emotional outburst will remain in this comment, and my point still stands lol I'm not backing down from that suggestion, and I hope you'll join my movement. #JusticeForWebDevs
Nothing like setting up a pretty logo in the center of the header, then following the instructions exactly, only for CSS to completely break because the language can't stand to position anything next to a centered image. Then spend two hours trying to work around it, and it goes into a tailspin because it can't seem to understand itself after centering an image in the header. Inspect the page, browser says there are no issues. Can't even troubleshoot it because the browser doesn't detect any errors.
This one thing is a major hang-up for me when it comes to this language; center an object in the header, put something else in the header, centered object is no longer centered. Make any adjustment to re-center it, it's no longer responsive, find out by resizing the window, troubleshoot again, and the object will never center in a responsive way unless you hire a seasoned pro for $200 million. Then it works, you know you tried the method they used, and can't wrap your head around why CSS plays favorites.
It's like this particular styling option was only an afterthought to them and they didn't care enough to create a reliable solution.
So, I broke down and cheated by going waaaaaaaayyyyyyyyyyyy off-script to hack these items into the right place and make them responsive to an extent. Cool. Done and done 👏🏾, right? Nope! I still have a rogue vertical scroll bar that came from me using this method. It appeared while I was following the instructions to the letter, but it didn't happen to you. It baffles me how two different people can follow the same process for one element, and because one is centering an image near that element, they can get two entirely different results and have to follow two entirely different processes to get the *desired* result.
I just want to learn from the pros because you all are doing it out of genuine kindness and the love of teaching. But this language has some of us having to host $56 quintillion Hackathons to ruin your days looking for workarounds for something they made convoluted and should be simple. I wish I could talk to the developers of this language and tell them that it's totally allowed, recommended, and reasonable to introduce a square, stair, and floor system that constructs a box.
The canvas isn't flat, it's volumetric. Objects on different levels should be easily detachable from lower levels. If I'm constructing the second floor, the tiles I lay there shouldn't be pushing the tiles on the first floor to the side if they're not connected by anything. Stairs would be that connection, as making room for them consequently changes the layout of the tiles on the first floor depending on their dimensions. Therefore, if I climb through the window onto the second floor and I didn't build any stairs inside, I only supported the ceiling of the first floor with joists, there's no way for the tiles on the second floor to interact with the tiles on the first floor. I simply bypassed the first floor entirely. That's how the z-index should work as a simple solution for formatting issues. This is a real life concept that we apply to apartment construction. Two apartments stacked on top of each other are frequently identical in layout, with neither being impacted by the design of the other because there is no internal connection to the floors of either story. The stairs are outside of the units, so the second floor can be reached without stairs in the apartments. And they could solve this by introducing term called _adapt._
An _adapt_ would drop a vertical wall down from the edge of the higher item onto the lower item, and push it to the side. That's the rise of a stair. Its default state should be enabled. That way, there's no confusion for seasoned developers already using the language as it is, and it can be turned off _exempli gratia_ : _adapt: none;_ - no more tears. Everything under z-index: 2 will slide underneath it and behave as if the element on z-index: 2 wasn't even there. No code or web pages would break because its enabled by default, and anyone struggling with centering can turn the adapt off and move things around without having a stroke or breaking away from well-crafted tutorials like this one.
Apologies for the rant. I just really wanted to use what you taught here. It's exactly what I wanted to add to my pages, but centering changes everything. Literally. I finally got close, but I can't get rid of this rogue vertical scroll bar to save my life. It came out of thin air, and there are no clues as to why it suddenly appeared - besides CSS disliking people who want to center logos in headers to such a great extent that it will break a whole page to discourage the practice.
you've defined it very smoothly and clearly thanks man.
This is how it was done 10 years ago :)
Please remove (update) this video, don't teach people how not to do things.
Great video, thank you so much!
I have a question :
When i open the sidebar and then increase the size of the viewport, the horizontal nav appears but the sidebar doesn't disappear. How do i do that?
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?
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!
Hello,
Thank you for your video! it helped a lot. I have a question regarding the sidebar. I noticed that when I finish the project, the only problem I face is with the sidebar. The menu button does not appear as a result the sidebar it does not appear and the close button too. What could be the issue?
Regards,
you should keep making these videos bro
i've never seen anyone else explain things this cleary
his explanation is good and understandable
thank you to be helpful for my project wish you best for your Yt channel
wrost video maker false amking and faced lot of problems dont explain coding at first learn easiest way then teach us
i went step by step, and it dont work
It's work .
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.
I have learned more than creating a nav bar, Thank you, it all makes sense now.
This is the best search for responsive nav. Keep it up, man.
on the sidebar i did display:block and it worked and i removed the flex and the sidebar li
Excellent tutorial, very helpful.
But I think the navlink in the html to be written only once you wrote it twice is there anyway you can do it and write it once and will still perform the same function
didnt work
Thank you for video! That was short but contains a lot of information!
Wonderful, awesome, exceptional 🎉🎉🎉❤❤❤❤❤❤❤too much love
Source code plz
Definitely awesome ; why you didn't upload video continues?
it is great of tutorial and it is top one even if i saw many tutorials and thanks so much and it is taking interesting in it 😁😁
This is a very good tutorial however I have one question. When I coded the sidebar icon, when I press it after I inserted the JS, it shows Cannot GET /%3Csvg%20xmlns=
why is this?
@Coding2GO
Thanks! you saved me a bunch of time and It finally clicked for me how html/css utilizes javascript.
supper excellent sir. i scrolled down the whole youtube but didn't get video like this. Really amazing. love from pakistan
the sidebar is not opening in my mobile after hosting it. can you help me out please
You are the best! Thank you for the great Tutorial :)
R= reactive - RESPON D TION -- Netherlands , Duch! Police + SERVICE!
You have no -- f(x) u d(x)! TTY -- Personally it, be you -- simulated device net!
I followed this to the bone other than the logo as I use FontAwesome & it didn’t work, rewatched and still not sure what I’ve done wrong.
What exactly doesn't work for you?
Do you get an error message on the console?
If you want to compare the code, you can find the source-code on our website:
coding2go.com
Is it accessible?
let me be honest here, i never comment on videos on YT. But since yesterday, i was going thru every video on Yt, made a nav bar for almost 3 times, and now after i did what you explained, ive made the nav bar, made it responsive on my own, and also finally understood how to make a website responsive.
Kudos to you!
Thanks! Glad we could help ;)
amazing video thanks a lot solved my problem
I know English little bit but your explanation is awesome 😎😎
Please how can I add a smooth transition I so the navbar can slide in smoothly
All of my links are on the left, yours are on the right and I can't figure out why? Please help.
Hope its not too late but here is how I did it: I used "margin-right: auto;" on the first list-item (which is the logo). That pushed everything else to the right. If you don't have a logo you can also use "justify-content: flex-end;" to align everything on the right using Flexbox.
code / github link?
This is fantastic, its simple and easy to follow, thank you so much!
Best navbar tutorial I've come across
Very very nice! I found it really useful for me. Thank you so much!
Simply explained the complex things within 15 minutes is really an awesome job, very useful tutorial for responsive design. Thanks much for publishing this most valuable content, keep rocking👏👍💐
thank you so much. i had a problem of horizontal scrolling. now its solved
all good till the menu svg,when i pasted the link into the html, all the closing tags of html went red...
You most likely replaced some of your previous code characters while pasting. Undo and paste again while paying attention. You're welcome
Fantastic tutorial!! Subbed! Please can you do one where the body is blurred when the sidebar is activated? Is that too much work? 😅
Thanks! I will probably not do another navbar tutorial but I can tell you how to do it now. If you use the code from my other navbar tutorial (ua-cam.com/video/8eFeIFKAKHw/v-deo.html), where we use an overlay that covers the entire website, we can use that overlay to achieve the blur effect. Select the #overlay and declare backdrop-filter: blur(10px); that will blur the rest of the website.
@@coding2go Thanks for the overlay! I shall have a go and let you know! thanks very much !
Thank You for this Amazing Tutorial
for some reason even tho i put max width at 1024px and min width at 400px, it gets swallowed by the screen after 722px...what could be my issue here? is it got something to do with the navbar container?
Great video. You are talented in explaining. Keep going, I believe you will have many followers )
THANK U VERY MUCH! U JUST EARNED A SUBSCRIBER
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
Is there a way to move the logo a bit more to the right while still keeping it responsive? Also is there a way to move the text to the left while still keeping it responsive?
use "padding"
If you types this over and over, during your coding, that is a over again it would be in your head like memor
Hellalula , Did get it to work -had an error somewhere , just copied the code from the source of origin
I do have more respect for Javascript than other programming for some reason.
Please how can i make it have. Smooth transition
/rtv II vkx ant paalsmtz rwch(4''pxn tun) < int=cjx dch tn/
/~rtv tmp mrchz tdvR par 8x ray wb mol wn - cnnon/
/ba cnnon ay 3''pxn UI' pachf-stp < par 8x(R LAY) u || abv vfr rayz mrk[]!
/~h2 idz~rtv II vkx ant v. ch < paalsmtz xfr + hlv Rtv stp i.e. dubd rayx wb wn mol - ba || ext - alien zp - tyl chp - email/
How do you solve the problem if you click on the sidebar then resize the screen back to a bigger size? How do you make the sidebar disappear then?
just enjoyed watching this.
Thanks Bro, God Bless you.
Thanks Brother.
Thank you very much ❤❤sir
This is the great tutorial, thanks a lot👍
Using display: none in the media query did not work until I added display: none !important. Not sure why but now it works
Awesome i have try many time before to make a responsive nav bar but cant do but after watching this video i have made cool responsive nav bar with ease thanks alot sir .
for those who there bar, X icon keep pop up when they click it and did not stay steady it is because of the anchor tag. so remove it
thank you, succes for you
Thanks for the video really helpful,I have been searching for where someone is gonna explain responsive on nav bar🙏. Thanks once more
thank you so much