Offcanvas for small screens turns to sidebar for large screens

For Bootstrap 5 (@Zhenitt)

For Bootstrap 4


Great little tutorial. I learned a lot in such a small amount of time, thanks Ben.

I would find it useful if you made the little snippets (bits of css and other hand-coded elements) of code available to copy or download.

1 Like

Hi Neil, thank you for your feedback. I have included the CSS code under the video. This was remiss of me in the first place.

1 Like

Hi Ben,
I am not able to get my offcanvas slide. Please help.

Please give me more information so that I can replicate the problem in order o solve it. An online test page would be great.

This is the link:

Justin, that is exactly the way that it was meant to work, a fixed side bar for larger screens and a sliding off-canvas for smaller screens.

Did you want a different behaviour?

Yes. Sidebar smooth scroll please.

you can just add a css property to the off canvas:

transition: 2s;

Got it. Thx Sorry_Duh. Much appreciated.
Great tutorial Ben.

1 Like

Thank you Ben its a great tutorial!
Your video helped me a lot.

Is it possible to use this solution without covering the footer?

You could try this add into the root styles:
--bottomNavbarHeight: 50px;

And then replace the current height in the .offcanvas in the media query:
height: calc(100% - var(--topNavbarHeight) - var(--bottomNavbarHeight));


Thank You Sorry_Duh.
I´m going to try it.