How to Create a Responsive Navbar using Bootstrap 5 | Responsive Sidebar Menu

🎬 How to Create a Responsive Navbar using Bootstrap 5 | Responsive Sidebar Menu
In this video, I created for you a Responsive Navbar in HTML CSS and Bootstrap 5, no JavaScript. When mobile, the Navbar Menu turns into a useful Sidebar Menu, beautiful layout, super simple and functional.
Site navigation is very important in terms of usability, Bootstrap 5 can help us with these features either a navbar or sidebar navigation!
👍 If You Enjoy This Video, Consider Hitting The Like Button!
🥁 Subscribe To Stay Notified For New Videos: / @mathe.creative
🌟 The "Front-end for Beginners" EBOOK is now available! High quality content, check it out now:
/ shop
[SOURCE CODE]
Became a channel member:
--- Patreon:
🌟 / mathecreative
keywords:
menu responsivo,
responsive navbar,
responsive navigation menu,
responsive menu,
navbar html css,
responsive navbar tutorial,
mobile navbar,
responsive navigation,
responsive nav,
responsive navbar bootstrap,
bootstrap 5,
navbar menu,
navigation sidebar,
responsive sidebar,
sidebar mobile,
navbar css html,
navbar menu css html,
side navigation bar in html css,
navbar bootstrap

[@mathe.creative]

Hi there! Make sure to SUBSCRIBE for more tutorials like this one! ✌ Get access to all Mathe. Creative features: www.patreon.com/MatheCreative

[@xyrn23]

broooo how come u only have almost 200 subs you're videos are so cool and the source code are always easy to download damn. keep it up man! new sub btw.

[@mathe.creative]

wow, so happy to read your comment bro. Patience is the secret, and if one day I'm big it will be because of people like you who encourage me to keep spreading knowledge :)

[@Winged-F]

You are a professional developer..!! Wonderful Design 😯👌🔥!!!!

[@mathe.creative]

Wow! I am so happy to read and reply to your comment, bro. Thanks!

[@PauloCesar-bn5eu]

Amazing! 👏🏼👏🏼

[@mathe.creative]

Thanks bro 😉

[@SinnerzTo0xIc1vs1]

Amazing job bro, Thanks

[@mathe.creative]

Thanks bro :)

[@Iguitos]

Very Nice navbar bro, keep it up

[@mathe.creative]

thank you bro 😉

[@Factvideo014]

Thanks my day not missed ❤️😊

[@mathe.creative]

Welcome bro 😉

[@saidaouyous861]

thanks buddy

[@mathe.creative]

You're welcome, bro ;)

[@fadhildhanendra]

After I clicked on Modal's menu, it's always go back to the top after did a scrollspy, what should I do to solve that?

[@mathe.creative]

Hello! I don't quite understand the problem you're facing, could you explain in more detail, please? If you prefer, you can send me an email and I will help you with this :)

[@nikolasteslaidol1796]

i ve a doubt ,Is this or bootstrap grid method better....??

[@mathe.creative]

Hi, bro! In programming, we often encounter questions like this, as it's possible to achieve the same result in various different ways. I believe the important thing is to always test and validate according to the needs and our experience. I clearly think this is a good way to create a navbar, but the rest of the community here in the channel and I would like to know how you would do it using grid. Feel free to share it here or in the official channel repository if you'd like. Thanks :)

[@TainaNarrea]

muy beno

[@mathe.creative]

Thank you :)

[@luffydaisy3469]

How can I center the menu container and items in mobile view?

[@mathe.creative]

Hi there! If I understand what you really need, it's not complicated at all. Come with me! First, our .modal-dialog needs to be screen width (100vw), display flex and justify-content center. You can also add padding-inline to give elements a "breath". You got it? If not, I can try again :)

[@nikolasteslaidol1796]

i ve a doubt ,Is this or bootstrap grid method better....??

[@MichalSmutny-gc7tf]

nice video but when I decrease the resolution for mobile view my hamburger menu wont show, could you help me?

[@mathe.creative]

Hi Michal, sure. What doesn't appear is the hamburger icon or the links it should display? For me to understand better

[@MichalSmutny-gc7tf]

@@mathe.creative the hamburger icon :/

[@mathe.creative]

@@MichalSmutny-gc7tf Right, I believe it may be something related to the icon itself, my tips are: check if you are really using Font Awesome for the icons, see if the cdn or local file is being loaded in the of the page. I tested the project I left in the description and it's working :)

[@CODE_WITH_SAM8786]

There is no code in index.html file downloaded by ur drive link Please tell me how to download the complete source code

[@mathe.creative]

Hello! I tested it here, and the code is indeed there. Could you please check again? If you're still having trouble viewing the code, you can join the official channel repository on GitHub (details in the channel description). There, you'll find this and many other projects, all 100% available. I would be happy to have you there with us :)

[@jesed2011]

Do you think it would work with Bootstrap 4?

[@mathe.creative]

Hi there! I believe so, but if you have any kind of conflict, the good thing about using bootstrap is that its documentation is very complete and easy to use, you can follow on this page (getbootstrap.com/docs/4.0/components/navbar/) how the navbar works with bootstrap 4 and adjust what is necessary ( if necessary)