I've got an issue with my bootstrap code. I'm trying to make a sidebar come in from the right side on a mobile device, pretty much exactly like here: http://getbootstrap.com/examples/offcanvas/ but I can't seem to get it to work. I'm also trying to make the chevron icon change between left and right facing arrows, but that does not work even though I've gotten it to work before with a left sidebar. My project is located here, any help is appreciated piston.serverpit.com/bootstrap/main
EDIT: I've managed to get the button and action working right, now the only problem seems to be that the sidebar places itself under the content of the page instead of to the side of it. How do I fix this?
Fiddle: http://jsfiddle.net/zauLh39y/
EDIT2: Got a working example by starting from scratch with the offcanvas example, but when I try to put the article code into the body then it still breaks... Ideas? It seems like the main problem was setting the minimum width of the sidebar in the CSS. http://jsfiddle.net/xyd6ttbe/
I've managed to fix it; the main problem was forcing the width of the sidebar and the reason it ended up being pushed underneath the article was because of the <hr> tag.
For updated code see here: http://jsfiddle.net/rwstwv0e/