I do not understand much of responsiveness, but I still wanted to create one of those layouts that look "normal" on the PC, but on the smartphone the hidden side menu is visible when clicking on a link on a fixed bar at the top. Searching a little bit found the Bootstrap Jumbotron .
I made some changes in it so that this Jumbotron was 100% wide, forcing the side menu to be below it:
<div class="container">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row row-offcanvas row-offcanvas-right">
I just took Jumbotron from the offcanvas
But that was strange when viewed by the Chrome Developer Tools smartphone simulator, just because the side menu was down there.
First I thought it was just the case of "pulling up" and I put a margin-top: -76.6% on #sidebar to "stick" on the fixed bar. Not only did this very specific value stink me, but it also made the menu disappear from the "normal" view on the PC.
In addition, the default width of this menu is very close to my taste, I wanted it to cover 100% of the width (and height) of the screen, whatever it is.
But I tried to adjust the Grid of #sidebar , increasing col-md-3 to, perhaps col-md-12 , but did not change anything; Even removing it and col-6 precedes it, the sidebar just got a little bigger.
I did not change the height, but, head on, I think it would be enough to add a helper d-flex h-100 that would solve the problem.
How would I adjust? Detail this Jumbotorn is version 4 of Bootstrap.