Now that Bootstrap 5 has a Offcanvas component 👏, it makes sense to explore building a Bootstrap 5 Sidebar. Sidebars are often used for vertical na...
For further actions, you may consider blocking this person and/or reporting abuse
I have a problem in Sidebar Example 2 when I try to introduce a big responsive table in the text. As you can see in my fork of it (codeply.com/p/PNoCYKK8Wk), using table view there is an overlapping between the sidebar and the contents. Do you know how I can fix this problem?
I know this is a bit old, but I think what you were saying is that the content area is not forcing the nav to collapse to the top of the screen when on mobile devices. If there is not enough content in the content area, the nav bar is expanding vertically.
To fix this, I looked at the other examples, and noticed that many of them are using this on the div tags around the content "min-vh-100". This is basically saying minimum vertical heigh of 100% where the content is displayed.
<class="col pt-4 min-vh-100">
CONTENT HERE
</div>
This should push the nav bar up so that it is compressed to the correct size.
I'm not seeing overlap.. I'm seeing the table wrap. Is that what you mean?
There is an overlap when I scroll, but finally I solved it adding "col-sm-9" in div class of line 62. Thanks
Ah, Zim is on DEV. Nice seeing you here 👍
Hello 👋 my SO friend, Nice see you too!
I want you to crash DEV 💥 with Boostrap posts!
PS: you can add
htmlin front of the 3 slashes to have a colored code dev-to-uploads.s3.amazonaws.com/up...Cool... much better 😉 thanks for the tip!
Great post that was exactly what I was looking for. Example 1 was what I wanted to do but there was one minor glitch that was bugging me. You can see it in the GIF and in the live demo as well - there's a small but noticeable delay when expanding items 2+ in the sub menus. The submenu ul elements have the nav class applied and with that comes flex-wrap: wrap. If you set this to the default nowrap in your own css that delay/glitch completely goes away just with the following applied after bootstrap's css
assuming the top level menu ul element id is 'menu'
Thanks for the great post!
Hello.
I am new coding with bootstrap and web developmente in general. I was wondering if there is a way to implement this sidebar in every page without the need to paste the code in all the pages.
Thanks!
Neat examples, I have a problem with Example 2 tho... in the "sticky footer" version, both the footer and the top navbar stretch to fill the space if there is not enough text to fill the page. This doesn't happen in the "normal footer" version. Is there any class or tag that can be added to prevent this?
This isn't normally noticeable in the Demo since there's a bunch of placeholder text, but if I delete some of it, it stretches.
Good article. But I am not really satisfied when seeing the result of Example 6, i.e "Push" Sidebar.
My only concern is on the placement of the element/component used for toggling the sidebar. When the sidebar is shown/open, I think the appearance of the toggle element on the main element is not intuitive, even a bit confusing. The sidebar is already open, why should we need to display the toggle element on the main element/section ? In that situation, it appears as if there will be another menu content when user click the toggle element.
We quite often see in real applications, the toggle element is usually placed on the sidebar itself when the sidebar is open, commonly using certain icon on the right side of the sidebar. Only when the sidebar is closed, then the toggle element (with text) is placed and appears on the main element/section.
I realize that in order to achieve that purpose, it needs additional work and might be tricky.
For comparison, we can see on bootsnipp.com/snippets/Q0dAX which uses version 4, but yeah... it requires additional work on CSS.
Very nice! Great, simple and fantastic examples!
Hi,
New to DEV community, I have opened the Sidebar Example 1 in Codeply, but I see only HTML 5 code,
is it that I should be coding the respective Java Script and CSS files, hope I am not missing something basic here to get them,
Can someone please guide me?
Thanks
Nicely done! One question: how does one place the horizontal Navbar in Example #2 to the bottom as opposed to the top? I've tried changing to "fixed-bottom" but then the Sidebar no longer occupies the full length of the screen.
I haven't checked/tried your code, but there is absolutely nothing wrong with Bootstrap, or the Bootstrap Offcanvas component (which displays just fine on mobile).
Hi everyone,
I really liked the examples and wanted to try Sidebar Example 6. I made a new React project and added bootstrap and react-bootstrap latest versions. Clicking the button does not close the menu. Do you happen to know how I could fix this?
Its real amazing
Well written for getting started.
Amazing content! That's what I needed! Thank you
Thanks! Looking for this but on the Bootstrap 5 documentation there's only an offcanvas
thank DEV community i am just used your templates sidebar
Looking for examples with font awesome icons
Super interesting. Unfortunately I can’t see any of the examples. Codeply certificate expired?
Working again :)
Just a quick question but am I allowed to take this work and implement it into my website? I might change some style here and there but take the general template you have built.
I don't wanna be getting into any legal troubles because I'm pretty new to publishing a website online...
Hello, can you please tell me what is the stylesheet link?
i just wanna ask, how i can change the bg color of menu bar from the example 1, as you can see from my qst, im a newbie, sorry
Hello community, i'm new on bootstrap and i have a question may it can be crazy :
why when i use the code i can't see the colors , it appears all white !
Thank you