Vertical Navbar Bootstrap 5
HTML-код
- Опубликовано: 4 апр 2022
- How to modify a horizontal navbar to create a Bootstrap side navbar or vertical navbar.
HTML | CSS | BOOTSTRAP
Source code for Vertical Navbar Bootstrap:
codingyaar.com/bootstrap-side...
Disclaimer:
This video was made using Bootstrap 5 while the source code uses Bootstrap 4. So make sure you use the correct starter template/links and the respective navbar.
Bootstrap Offcanvas Navbar:
getbootstrap.com/docs/5.3/com...
Bootstrap 5 Navbars Playlist:
• Bootstrap Navbar Chang...
Bootstrap 5 Carousels Playlist:
• Bootstrap 5 Carousel
#bootstrapnavbar #navbar #bootstrap #bootstrap5
Coding Yaar's Discord server:
/ discord
Buy Me A Coffee ☕️:
www.buymeacoffee.com/codingyaar
Good stuff! Thank you for sharing.
Thank you so much for this useful styling.
Thank you for this simple explanation
You are so talented I wish you achieve millions of subscriber till 2023
you are amazing thank u so much!!!!!
MashAllah. !!!!!!!!!!!!
that's a great video. I love this channel😊😊😊
Thanks a lot for this tip
Glad it helped!
Thanks Yaar
I tried to add cards, but they come below the navbar, then I tried to add the navbar under col-4 and the cards with col-4 too and both of them under a row, but that still didn't work. how can I add cards or other things next to the vertical navbar? thank you
This should have worked:
👍
Very useful video, however, I notice that when the viewport hits 992 the hamburger menu appears right away. It should be triggered by a smaller breakpoint, like 576 or 480.
You can use the class navbar-expand-sm instead of navbar-expand-lg to collapse the navbar at 576px.
You need to change it in the HTML and CSS files.
You would also have to change the breakpoint in our media query where its currently 992px.
Ok @@codingyaar, thank you!
How to make and see the hamburger toggle in sidebar menu?
You can use the Bootstrap's hamburger toggle that you see on smaller screens.
Remove the navbar-expand class so that it remains expanded on all screen sizes.
Place the navbar-brand inside the navbar-collapse.
Set the position of navbar-toggler to absolute and place it where you want.
It will work at this point, but you'll have to style the other elements accordingly. Like setting the background on navbar-collapse instead of navbar.
is it not available in bootstrap? If we need to use css what's the benefit of bootstrap
Not yet. Which is why we modify as per our requirements. The benefit is you won't have to build it from scratch.
I did think about mentioning offcanvas but you didn't seem to like working with CSS.
@@codingyaar yaa I know css but Iam working in live project in react js of office for quickness I was finding a faster alternative.
how to make it vertically collapse, not let it horizontally collapse
Adjust the media query to keep it vertical
The offcanvas menu is a crap: You click on a menu item link and go to the next webpage. When you click on the back button and go back to the privious webpage, the offcanvas menu is still open! This is not a good idea for a menu, especially if the offcanvas menu is taking the whole screen of the mobile display! 👎
You can close it using JavaScript. Why aren't you collapsing it on mobile?
@@codingyaar Well, I have a collapsed offcanvas side menu on mobile. I click on the hamburger menu icon, then click on a link and go to the next page. But when I click on the back button, I go back to the privious webpage and the offcanvas side menu is still open. My visitors usually click the back button again and leave the website completely.
I tried JS, but this is a hack and does not work properly (issues with cache, etc.).
You can create a new video and show how to resolve the issue. That would be a great help to many of us. But the question still remains: Why should I hack it? Why doesn't it simply work as it is expected, just like a menu?
I was suggesting JS incase you wanted to collapse it on larger screen. As for it not collapsing after link click on mobile, I'll have to look into it.
@@codingyaarThank you for your efforts! 👍