DEV Community

Discussion on: Bootstrap 5 Sidebar Examples

Collapse
 
pgarciabaez profile image
Patricio García

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?

Collapse
 
carolskelly profile image
Carol Skelly

I'm not seeing overlap.. I'm seeing the table wrap. Is that what you mean?

Collapse
 
pgarciabaez profile image
Patricio García

There is an overlap when I scroll, but finally I solved it adding "col-sm-9" in div class of line 62. Thanks

Collapse
 
hayesb profile image
Brian C. Hayes • Edited

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.