Offcanvas for small screens turns to sidebar for large screens

Videos
1

For Bootstrap 5 (@Zhenitt)

For Bootstrap 4

10 Likes
2

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
3

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
4

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

5

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

6

This is the link: http://offcanvastest.infinityfreeapp.com/?i=1

7

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?

8

Yes. Sidebar smooth scroll please.

9

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

transition: 2s;

10

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

1 Like
11

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

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

12

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));

2 Likes
13

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