Bootstrap 5 Navbar Tutorial

[@markandro2321]

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!

[@ryanboll9464]

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!

[@ADesignerWhoCodes]

You are so welcome!

[@vladimiraleksic4066]

A Designer who Codes and Explains in a clear and motivating way! Thanks a lot.

[@j_u_d_y3041]

I am a beginner for BS5 and your tutorial is such a lifesaver!! Clean and structured. Thank you sooo much~~

[@ADesignerWhoCodes]

You're so welcome. Glad it helped.

[@ridaharun3621]

I spent one Hours sreaching to move navgationbar to right until i find you ,, Really helpful

[@ADesignerWhoCodes]

You are welcome. Glad it helped.

[@nnwebdigital]

Finally, I have found the way to move navigation to the right. Thank you very much! 👏

[@ADesignerWhoCodes]

Oh sweet! Glad to have helped.

[@soumajitghosh02]

Yes I wasted 4hrs to move it to right

[@nickbrah]

@@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.

[@otasofovwe1939]

Phew . Finally I can move nav items to the right with logo on the left . Thanks a lot for this .

[@ADesignerWhoCodes]

So welcome Otas.

[@daraqadir]

Very helpful, the voice and the way you are talking very clear, Thank you master!

[@ADesignerWhoCodes]

You’re very welcome. Glad I could help.

[@macarenaalonso5853]

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?

[@ADesignerWhoCodes]

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.

[@jonasamdroid2356]

@@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

[@AdroitAdel]

same

[@narenanand6270]

Stuck in this part for quite a lot of time. Thank you

[@ADesignerWhoCodes]

You are so welcome!

[@christellemata8037]

Omg! I don't know how to thank you i've been stuck for days ! keep it up the good Work!

[@ADesignerWhoCodes]

What? That's so awesome Christelle. I'm stoked I could help you.

[@عبدالمعيد-غ6ر]

Highly recommended !!! for beginner such a huge explanation I got lots of help with your videos.

[@florjadedandejesus6932]

can you explain those data-bs-toggle etc. bec i dont know them are there static ?

[@peterochieng3788]

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

[@ADesignerWhoCodes]

You're very welcome!

[@haypritam]

This is the best video on this topic. Thank you

[@pilarelisii8265]

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!!

[@ADesignerWhoCodes]

It could be that there is no JavaScript attached. Check the source code and see if you are missing something.

[@jackcollazo]

Excellent tutorial. I was missing the class "ms-auto" and this video explained it well. Thank you!

[@ADesignerWhoCodes]

Ya, it is easy to overlook that. Stoked it worked for you.

[@rayel404]

same to you bro

[@Crazyfish66]

Thank you bro, I didn't know how to get the drop down text off the left side. Seems kinda obvious now!

[@my-trending]

Your tutorial on Navbar is very intuitive that I now understand it much better. Thank you for making this great video.

[@ADesignerWhoCodes]

Thank you for the lovely comment.

[@jamiecalhoun5408]

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

[@ThilinaWimalapriya]

This is completely understandable to anyone. Thanks for sharing your knowledge with us.

[@ADesignerWhoCodes]

You are so welcome!

[@berto999x]

Hello, how do I use this navbar to another HTML without copying the whole code?

[@bio-radingenieriabiomedica7898]

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!!!

[@ADesignerWhoCodes]

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.

[@illumi1749]

how do i make the buttons actually work though?

[@whitenoise5679]

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.

[@ADesignerWhoCodes]

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.

[@phiro-tvx]

This is so clearly to understand it. Thank you for this tutorial.

[@ADesignerWhoCodes]

You are so welcome!

[@justinernest2363]

is there any way to customize the colors of the nav links?

[@ADesignerWhoCodes]

Yes. Just inspect the css and then in a custom css, change the color. That could make for a good future video :)

[@justinernest2363]

is it possible to make cards hoverable so that they are clickable?

[@ADesignerWhoCodes]

Yes, but there's no hover on am mobile site. Just use a:hover.

[@WiseCoderWhoLifts]

Amazing explanation and vid man. U made it all so simple and crystal clear. Keep Going!

[@ADesignerWhoCodes]

Thanks! More on the horizon.

[@dvammar]

Awesome explaining >> Thank you

[@wahidamini7591]

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

[@ADesignerWhoCodes]

mx-auto for the middle.

[@Magma-uw7yo]

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 ?

[@ADesignerWhoCodes]

I've got some source code you're welcome to compare notes to.

[@bilshanpatrick2576]

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

[@ADesignerWhoCodes]

Did you make sure you to add the JavaScript?

[@sup6316]

hey, I am having an issue. My navbar expands but when i click hambutton again it won't collapse.

[@ADesignerWhoCodes]

Not quite sure what’s happening. I put up the source code so you can compare the code to mine.

[@thatguy6664]

Another excellent video...much appreciated!

[@ADesignerWhoCodes]

You are very welcome.

[@keithmax5535]

Your explanation is awesome, finally I understand how to design navbar

[@ADesignerWhoCodes]

Oh sweet! Once you finish your site design, drop me a comment with the URL. would love to see it!

[@quailfarmsunlimited]

You saved me so much time! Thank You!!

[@rapify0]

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

[@ADesignerWhoCodes]

If you're still stuck, email me. My info is on my contact page.

[@johnvincentvillanueva8810]

thank you for making this tutorial, its very helpful

[@ADesignerWhoCodes]

Very welcome Johnvincent!

[@samopostam]

This tutorial is really well done. Thanks!

[@wajihsalamkhan9123]

The ham button is not working for me, does anyone know how to solve this problem. I implemented the same code in the video

[@ADesignerWhoCodes]

Hmmm. Did you load the JavaScript at the bottom of the template?

[@ilan19891]

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.

[@ADesignerWhoCodes]

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.

[@dusteddream3070]

Is there a way to put the navbar in the center of the page?

[@ADesignerWhoCodes]

mx-auto is your friend here :)

[@dp3633]

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 !!!

[@ADesignerWhoCodes]

Ya, it's a small thing to move it over. :)

[@syariefrahman7411]

Finally I can move nav items to the right, idk using row/col not work

[@ADesignerWhoCodes]

All about the auto or start/end. Sweet!

[@maryamjamal7700]

What is the ADA abbreviation in programming?

[@ADesignerWhoCodes]

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

[@maryamjamal7700]

Could you please do the css part too?

[@ADesignerWhoCodes]

The default design comes with Bootstrap. What specifically are you looking for?

[@maryamjamal7700]

@@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.

[@ADesignerWhoCodes]

@@maryamjamal7700 I gotcha. I can make a future video on this. Thanks!

[@iiyoussef3686]

Excellent tutorial. Thank you for making this great video.

[@ADesignerWhoCodes]

Glad you enjoyed it!

[@bushranikhat2326]

How to remove the outline of navbar-toggler button?

[@bushranikhat2326]

Hey if anybody having the same problem ,you just have to make the box shadow none on toggler focus.

[@ADesignerWhoCodes]

Correct. You can use the pseudo class ::focus to remove it.

[@lorraineguillennorbe520]

I am using Bootstrap 5 and navbar collapse is not working properly :( The list is not visible when clicking the hamburger menu.

[@ADesignerWhoCodes]

I've got source code available to you. Download the code and see if you are missing something.

[@lorraineguillennorbe520]

@@ADesignerWhoCodes Thank you so much! I'll check that out :)

[@ADesignerWhoCodes]

@@lorraineguillennorbe520 I wish I could help troubleshoot everyone. That’s why I’m happy to provide the source code.

[@tsmonaghan]

Perfect, thank you!

[@ADesignerWhoCodes]

You're welcome Tim!

[@rapify0]

@@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

[@checktheback.]

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" }

[@ADesignerWhoCodes]

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

[@mihaelacostea5783]

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?

[@ADesignerWhoCodes]

I’m building it from scratch so you can learn how to customize any component you want.

[@dhruvsrivastava9846]

This was an amazing tutorial!

[@ADesignerWhoCodes]

Thank you!

[@meez6314]

This is such a good tutorial, thank you!

[@cannabisanomaly]

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?

[@ADesignerWhoCodes]

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. 😎

[@rose-marlinesidney4896]

thank you. That helped me !

[@ADesignerWhoCodes]

You're welcome!

[@renanfernandes1950]

Amazing, thank you! you are an angel

[@ADesignerWhoCodes]

Wow. Thank you!

[@rapify0]

@@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

[@matiasjaliff3243]

Soooo clear!! Thank you.

[@obey_giant]

Thank you for this!

[@ADesignerWhoCodes]

So welcome. Stoked it helped.

[@pranshusati5818]

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

[@mrsansiverius2083]

Replace every "toggleMobileMenu" with "navbarNavAltMarkup". This can be easily done with CTRL+F

[@pranshusati5818]

@@mrsansiverius2083 thanks

[@theblackelephant]

Guy thanks a lot Allah bless you. make some full bootstrap 5 tutorial.

[@humantimelord5546]

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

[@ADesignerWhoCodes]

Yup! Have a video coming up on that and more.

[@Rsilvacortes]

This is better content than the payed curses on Udemy lol Thanks 4 the content tho!

[@ADesignerWhoCodes]

You’re too kind Rafael. Thank you.

[@MrTtampk]

How can I do a two rows navbar?

[@ADesignerWhoCodes]

I’d recommend getting into flex for that.

[@MrTtampk]

@@ADesignerWhoCodes Oh with a flex div and wrapping the elements? Thanks!

[@NabJungle]

I thank thee sir 😃❤️

[@ADesignerWhoCodes]

You are very welcome.

[@sheilamariegasatan3684]

the output doesnt look the same for me I dunno what Is the problem i just copied your code

[@ADesignerWhoCodes]

hmm. Not sure. But I have the source code available to download for reference.

[@victorfernandes758]

Thank you!

[@ADesignerWhoCodes]

You're welcome!

[@tvoy_podpischik]

this. is. amazing. thanks a lot!

[@ADesignerWhoCodes]

So welcome!

[@rasheedabdullahnayeeb5460]

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. 🥺🥺

[@ADesignerWhoCodes]

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.

[@rasheedabdullahnayeeb5460]

@@ADesignerWhoCodes ooohhhh.... okk .. Thanks man 🤗🤗🤗🥰🥰

[@rihasanatrofolo2472]

When clicking the hamburger icon, nothing happens. Unsure what the error might be, I've copied it exactly..

[@rihasanatrofolo2472]

I was using boostrap 4, that's the reason - if anyone has the same problem.

[@ADesignerWhoCodes]

Ahh. Sometimes it's the simplest of things that trip us up.

[@shapesii]

Thank you so much

[@ADesignerWhoCodes]

You are most welcome.

[@muhamadsidiq8668]

thnk u.. this is amazing !!

[@ADesignerWhoCodes]

So welcome!

[@papayaspice1155]

nice video!

[@ADesignerWhoCodes]

You're very welcome.

[@posycoder1275]

thank you so much

[@ADesignerWhoCodes]

Welcome!

[@geminicraftworks]

image became blurry after a minute. had to move on to a different video.

[@ADesignerWhoCodes]

Dang it KZbin. Get it together. 🤣

[@siris896]

Thank You

[@claudiofuentes9625]

I'm not english native, but I could understand all. Thank you!!

[@ADesignerWhoCodes]

Stoked! Thank you / Muchas Gracias Claudio.

[@buckyhelmsmash7670]

thank you vry much!!!

[@ADesignerWhoCodes]

You're so welcome Bucky. Happy to help!

[@manikraton8126]

thanks

[@Ayoutubeaccount3]

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

[@ADesignerWhoCodes]

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.

[@Ayoutubeaccount3]

@@ADesignerWhoCodes I initially did forget that but it still wasn't working after, but it's working now so I'm happy, great tutorial 😊

[@supratimchoudhury1492]

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

[@fatemen3764]

tnx

[@ADesignerWhoCodes]

You're welcome!

[@Zeath22]

I Fucking love you! thank you

[@ADesignerWhoCodes]

Love you too Zan.

[@PlanetVictic]

LMAO my name is almost close to yours!!!!!! XD

[@ADesignerWhoCodes]

Sweet

[@syediqbalahmed3176]

*_volay ... ocay ..._*

[@sachintha49]

Thank you

[@ADesignerWhoCodes]

Welcome!

[@SolomonGezu]

Thank you bro,