Bootstrap Vertical Menu should slide in/out from the left

I'm using this menu and immediately noticed it slides in from the right of the website, I want to change this so it slides in from the left instead.

I've looked at changing the CSS properties found in

#side-menu {bootstrap-better-nav.min.css}

I saw a property called

right: -300px

and changed it to

left: 300px

Now there's a weird behaviour because it opens on the left but when I close it slides towards the right before closing.

Please how can I fix this? Secondly in the event that I want to have 2 side menus, one sliding in from the left and the other from the right, how would I achieve this in BSS?

You will also need to change the property transform:translateX(-300px) for body.side-menu-visible #side-menu to (300px).