CSS Right Toggle Sidebar - solved

A toggle sidebar with a toggle button fixed to the middle that collapse from the left

How do I make this toggle sidebar to the right? Not only the toggle button but also the the side bar so it’s collapsing from the right.

I’ve followed this tutorial here and changed it a little bit to what I want: https://bootstrapious.com/p/bootstrap-sidebar

If you know some other nice simple example feel free to me one.

I’ll have to build this in React so in case you have tips, don’t hesitate, I am looking forward to them.

have you tried the float property?
I tried to apply it on your design but didn’t know on which tag. Can’t properly read your code :slight_smile:

I changed directly the position in the html.

great! it worked then
what I didn’t like is that the sidebar already exists in your webpage and it just moves when you click on the button. instead, you can position your sidebar on the right but with width = 0px;
then when you click on the live chat you ask JS to change the width from 0px to 250px or so.
did you try that?

I tried doing that with css but the element kept on existing. so it doesn’t collapse
I also tried with display:none but well, it does the same thing but I need an animation anyway.

I disabled the overflow because it’s going to be a full-screen application.