Bootstrap 5 Navbar Tutorial
HTML-код
- Опубликовано: 6 июн 2024
- Here's how to setup your navigation with Bootstrap 5 using the navbar class. I'll walk you through how to set it up along with ensuring the navigation is ADA accessible per the W3C.
** Be sure to stick around until the end to see how ADA accessibility works and how to check your site with Chrome's inspect. **
Purchase & Download the source code:
adwc.dev/products/94
More Bootstap 5 Goodness:
• Bootstrap 5 Tutorials
In this video I'll cover how to:
- Build a basic nav bar
- Move the navigation to the right
- & Add a logo
Thanks!
Haydn
// COURSES THAT WILL HELP YOU BUILD BETTER WEBSITES
○ Bootstrap Bootcamp (for Bootstrap 5): adesignerwhocodes.gumroad.com...
○ Gatsby Demystified: bit.ly/3xf2yyQ
// Premium Gatsby Starter Template
○ Ultimate Gatsby Starter: adesignerwhocodes.gumroad.com...
// Helpful RUclips Playlists:
bit.ly/3rrHj9D Bootstrap for Web Designers & Developers
bit.ly/36HEYPZ React Bootstrap & Gatsby
bit.ly/3twVn3C Gatsby for Web Designers
🛠 THE TOOLS & SERVICES I USE:
○ Where I buy my domain names (GoDaddy) - bit.ly/3v2GV2N
○ Email provider, lead generation and more! (ConvertKit) - bit.ly/3xbqwup
○ Graphic Design Tools, stock images and more (Canva Pro) - bit.ly/canva-pro-adwc
○ Website Hosting (Netlify) - www.netlify.com
► Join ADWC Nation on Discord
/ discord
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
Hi there! Haydn Adams, BFA. I'm all about helping web developers and web designers build better websites, through code. Yes, coding and be difficult at first. But I'm here to demystify that. To make coding easy so that you can ultimately build a better website.
Got a question for me?
adesignerwhocodes.com/contact/
Thank you so much! from all the channels I finally found the one who explains every tag atleast, not coding with just music! from now on I'll be following you! big support from Italy!
I am a beginner for BS5 and your tutorial is such a lifesaver!! Clean and structured. Thank you sooo much~~
You're so welcome. Glad it helped.
Finally, I have found the way to move navigation to the right. Thank you very much! 👏
Oh sweet! Glad to have helped.
Yes I wasted 4hrs to move it to right
@@soumajitghosh02 so did I, I was trying to wrap a row and column to get it to move right. but ms-auto and ul>li>a tags were all i needed.
Stuck in this part for quite a lot of time. Thank you
You are so welcome!
Very helpful, the voice and the way you are talking very clear, Thank you master!
You’re very welcome. Glad I could help.
This is completely understandable to anyone. Thanks for sharing your knowledge with us.
You are so welcome!
This tutorial is really well done. Thanks!
Omg! I don't know how to thank you i've been stuck for days ! keep it up the good Work!
What? That's so awesome Christelle. I'm stoked I could help you.
Your tutorial on Navbar is very intuitive that I now understand it much better. Thank you for making this great video.
Thank you for the lovely comment.
Amazing explanation and vid man. U made it all so simple and crystal clear. Keep Going!
Thanks! More on the horizon.
This is such a good tutorial, thank you!
Phew . Finally I can move nav items to the right with logo on the left . Thanks a lot for this .
So welcome Otas.
Your explanation is awesome, finally I understand how to design navbar
Oh sweet! Once you finish your site design, drop me a comment with the URL. would love to see it!
Highly recommended !!! for beginner such a huge explanation I got lots of help with your videos.
I spent one Hours sreaching to move navgationbar to right until i find you ,, Really helpful
You are welcome. Glad it helped.
Thank you for actually having a detailed explanation of everything you're doing with examples at a speed that allows me to retain most of the information!
You are so welcome!
Thanks so much for this tutorial I'm a beginner and I really needed a step by step Navbar Tutorial yours is the best I've seen so far
You're very welcome!
Excellent tutorial. I was missing the class "ms-auto" and this video explained it well. Thank you!
Ya, it is easy to overlook that. Stoked it worked for you.
same to you bro
This is so clearly to understand it. Thank you for this tutorial.
You are so welcome!
thank you for making this tutorial, its very helpful
Very welcome Johnvincent!
This is the best video on this topic. Thank you
You saved me so much time! Thank You!!
Excellent tutorial. Thank you for making this great video.
Glad you enjoyed it!
Soooo clear!! Thank you.
Another excellent video...much appreciated!
You are very welcome.
This was an amazing tutorial!
Thank you!
Awesome explaining >> Thank you
Thank you bro, I didn't know how to get the drop down text off the left side. Seems kinda obvious now!
thank you. That helped me !
You're welcome!
Thank you for this!
So welcome. Stoked it helped.
this. is. amazing. thanks a lot!
So welcome!
Perfect, thank you!
You're welcome Tim!
@@ADesignerWhoCodes your website link which you have given in the comment for downloading the source code is not functional it says "Success! Now check your email to confirm your subscription. After that, you'll get the source code." but it never sends me any email
thnk u.. this is amazing !!
So welcome!
Amazing, thank you! you are an angel
Wow. Thank you!
@@ADesignerWhoCodes 8:02 when i shorten the size of the window the menu button shows but that button is not functional on my side please help
Thank you!
You're welcome!
Let me tell you you are great!!! I am making a Full Stack Developer Course and the NavBar didn´t work because of the different versions of Bootstrap. I couldn't make it work until I came to this video. I am not an English speaker... but your video was really excellent explained. Thank you so much!!!
Muchas gracias! Thank you so very much. I’m beyond grateful to help you along the way of your developer course. Good luck on building the course! It can be a journey.
Thank you so much for the explanation, it's really helpful.
I am trying to put the navbar in the center with mx-auto but without success. Where exactly it should be? My nav bar is stuck to the right for some reason.
Hmmm. Try this:
getbootstrap.com/docs/5.0/components/navs-tabs/#horizontal-alignment
I guess .mx-auto doesn't work but .justify-content-center does.
Thank you bro,
Thank you so much
You are most welcome.
Thank You
nice video!
You're very welcome.
can you explain those data-bs-toggle etc. bec i dont know them are there static ?
thank you so much
Welcome!
This is a really good tutorial thanks! Is there a way to change the colour of the hamburger button without using the navbar-light/dark class in the nav? Im not using that tag because i want the navigation links to be different colours but as a result it makes the hamburger menu not show up
Yup! Have a video coming up on that and more.
thank you vry much!!!
You're so welcome Bucky. Happy to help!
I thank thee sir 😃❤️
You are very welcome.
Thank you
Welcome!
This is great, Bootstrap Navs are pretty easy, but to put the logo on the left and nav on far right stumped me,,, then suddenly!!! ms-auto ha ha hah aha, great stuff, thank you !!!
Ya, it's a small thing to move it over. :)
Guy thanks a lot Allah bless you. make some full bootstrap 5 tutorial.
Finally I can move nav items to the right, idk using row/col not work
All about the auto or start/end. Sweet!
Thanks, that's amazing. but how I can put my li links in the middel (center)? I want the pricing / features should be in the center. thanks in advance
mx-auto for the middle.
thanks
Heyyyy!!!!! Thank you very much for this tutorial... It helped a lott!!! And can you please show us the dropdown menu on hover using bootstap 5.. I really need it. 🥺🥺
Hate to break it to you, but there's no drop-down hover any longer. That's because everything in mobile-based and there's no hover on a mobile phone.
@@ADesignerWhoCodes ooohhhh.... okk .. Thanks man 🤗🤗🤗🥰🥰
I'm not english native, but I could understand all. Thank you!!
Stoked! Thank you / Muchas Gracias Claudio.
Hello, how do I use this navbar to another HTML without copying the whole code?
how do i make the buttons actually work though?
This is better content than the payed curses on Udemy lol Thanks 4 the content tho!
You’re too kind Rafael. Thank you.
Hi! idk if i am the only one who's having this problem, but i copied the exact code and everything goes well, until it breaks to the mobile menu. It shows the icon of the navbar but when i click it, it doesn't show the links, like, Pricing, Features and Contact. it's just nothing there. Anyone knows why this could happen?
Hmmm. I'm not sure. But I also realized that I forgot to upload the source code so you can check your code against mine. Check the description where you can download an example and you can cross-check your code. I hope that helps you Macarena.
@@ADesignerWhoCodes Hey man, tahnk you for providing the source Code. You dont realise how amazing that is. I really wann to Express my graditude for providing the best Video about bootstrap 5 . Youre amazing. Thank you
same
Thank you for your Video. I'm working on my project for my study and I would like to know how to change the navbar for different pages.
While being on the profile site. Is it possible to use a placeholder in the navbar to show on the right side "Profile".
I'm trying to show the current page Name on the top left side of the navbar but until know I wasn't successful.
Something like this:
and a JS which proofs the current class of each page
Something like this:
if(main.hasClass("aboutUs)) { page_title.innerHTML = "About us" }
If you're building HTML pages, just make a new page with the title "About Us" and add an active class to the "about" navigation. (Shameless self plug here) but I've got a complete course on Bootcamp if you want to take it further. adesignerwhocodes.gumroad.com/l/DjOao
I'm a beginner to BS5 and it's slightly overwhelming. How long until one is able to memorize all the different classes and property values inherent to BS? Do you have any tips on how to practice memorizing all of that?
How do you get to Carnegie Hall? Practice.
It literally just takes practice and Google. I often times type into Google, "Bootstrap flex". I don't remember all of the classes, but I know where to find them. 😎
Not really sure what is happening but the menu won't work. It shows up on the screen but the toggle isn't working. Project os built in Angular with Bootstrap 5
hi, I got a problem with close the menu, idk why it doesn’t work, when I click on the button nothing happens, the menu still open. nice video, thanks!!
It could be that there is no JavaScript attached. Check the source code and see if you are missing something.
is there any way to customize the colors of the nav links?
Yes. Just inspect the css and then in a custom css, change the color. That could make for a good future video :)
tnx
You're welcome!
ive managed to creat the toggle button, inserted all the items in it. but when i click it does not respond. could you please advice what could i be missing, thanks
Did you make sure you to add the JavaScript?
is it possible to make cards hoverable so that they are clickable?
Yes, but there's no hover on am mobile site. Just use a:hover.
6:50 How exactly did the nav bar immediately turned into a row after adding "navbar-nav" to the ul class? It's not working for me.
Download my source code. It's a great way to compare your code with mine and see if anything else is missing or not. Hopefully that will help.
Hello, the mobile menu navbar doesn't have the scroll effect. I copy the same code with the bundle link but it doesn't work. Why ?
I've got some source code you're welcome to compare notes to.
but isnt bootstrap supposed to give you the entire code for the navbar of your choosing? i thought this video was about getting a navbar code provided by boostrap and integrating it in the html code, but you are actually building it from scratch, right? or am i missing something?
I’m building it from scratch so you can learn how to customize any component you want.
hey, I am having an issue. My navbar expands but when i click hambutton again it won't collapse.
Not quite sure what’s happening. I put up the source code so you can compare the code to mine.
Is there a way to put the navbar in the center of the page?
mx-auto is your friend here :)
your website link which you have given in the comment for downloading the source code is not functional it says "Success! Now check your email to confirm your subscription. After that, you'll get the source code." but it never sends me any email
If you're still stuck, email me. My info is on my contact page.
What is the ADA abbreviation in programming?
Americans with Disabilities Act. It's an American law that dictates how sites should be built to aid the hearing, vision and other impairments. Here is some more information on it: www.w3.org/standards/webdesign/accessibility
The ham button is not working for me, does anyone know how to solve this problem. I implemented the same code in the video
Hmmm. Did you load the JavaScript at the bottom of the template?
Could you please do the css part too?
The default design comes with Bootstrap. What specifically are you looking for?
@@ADesignerWhoCodes Yes i know, If a person wants to change navigavtion bar color or it's element's color and other various things by choice, and for that only css can help Then how to do it in bootstrap? I know css but it's confusing in bootstrap,having problems. Hoping for you to give a solution. I am having a problem in navigation bar, navbar-dark is preventing colors in elements and when i am removing the navbar-dark, toggle icon disappers.
@@maryamjamal7700 I gotcha. I can make a future video on this. Thanks!
I Fucking love you! thank you
Love you too Zan.
the drop-down button dose not work I copied the code word to word still it dose not sorry to bug you even though u made such a nice tutorial but can i plz get a little more help
Replace every "toggleMobileMenu" with "navbarNavAltMarkup". This can be easily done with CTRL+F
@@mrsansiverius2083 thanks
How to remove the outline of navbar-toggler button?
Hey if anybody having the same problem ,you just have to make the box shadow none on toggler focus.
Correct. You can use the pseudo class ::focus to remove it.
I am using Bootstrap 5 and navbar collapse is not working properly :( The list is not visible when clicking the hamburger menu.
I've got source code available to you. Download the code and see if you are missing something.
@@ADesignerWhoCodes Thank you so much! I'll check that out :)
@@lorraineguillennorbe520 I wish I could help troubleshoot everyone. That’s why I’m happy to provide the source code.
How can I do a two rows navbar?
I’d recommend getting into flex for that.
@@ADesignerWhoCodes Oh with a flex div and wrapping the elements? Thanks!
the output doesnt look the same for me I dunno what Is the problem i just copied your code
hmm. Not sure. But I have the source code available to download for reference.
LMAO my name is almost close to yours!!!!!! XD
Sweet
When clicking the hamburger icon, nothing happens. Unsure what the error might be, I've copied it exactly..
I was using boostrap 4, that's the reason - if anyone has the same problem.
Ahh. Sometimes it's the simplest of things that trip us up.
image became blurry after a minute. had to move on to a different video.
Dang it RUclips. Get it together. 🤣
couldn't get the hamburger button to work either like I saw in a few comments, no idea why, I even looked at the source code and compared line to line, spent all day trying to solve this, in the end I just copied and pasted the source code, made my amendments and it worked and I'm left scratching my head 😂 must've missed something despite checking it over 10 times
Make sure you have the JS. A lot of times people forget that one part at the bottom. Good luck! Wish I could individually edit everyone's code.
@@ADesignerWhoCodes I initially did forget that but it still wasn't working after, but it's working now so I'm happy, great tutorial 😊
*_volay ... ocay ..._*
sir with due respect i thought you would explain the individual terms and not just write those classes without explaining what those terms really meant..
what does navbar toggler, data bs toggle collapse means??????????????????? HOW THESE CLASSES INTERACT WITH EACH OTHER TO GIVE THE HAMBURGER MENU ITS EFFECT ?
and what are the functions of these classes :
- WHAT NAVBAR COLLPASE IS DOING AND WHAT COLLAPSE ROLE IS?
SIR CAN YOU KINDLY EXPLAIN IN ANOTHER VIDEO THE ROLES OR FUNCTIONS OF THESE CLASSES SO THAT THEY DONT APPEAR AS FOREIGN LANGUAGES TO ME???
THANKS