How to create a persistent/sticky vertical navigation, left side of screen?

We would like our community to look and feel a bit more like an app, with quick links to the 5 main community groups that we offer. We want users to be one click away from these core community spaces and their unique offerings, no matter where they are in the community. (I do recognize that we could have a traditional top nav that is persistent, but it's too subtle and as such is often blends in with the UX.)

I've hacked together a left nav which lays OVER TOP of our Telligent site. I did this by using an html tile widget loaded with the needed HTML/CSS code. Here's what I've got (see video) and it looks/functions almost as expected, on a nice full sized screen. But because it's laying OVER the community page, instead of shifting the community to the right, the bar takes up too much real estate and on smaller/scaled screens, it overlays, thus conflicting with the main content of the screen.

What I'd like to have is a nav like this site: http://other.wpengine.com/ where the vertical nav sits to the left of the main screen. Where would I put my code to make my vertical left navigation bar to appear on the left, but NOT overlay the core community site? The Alteryx Community (which is using Lithium) is another example which is actually a community site, that illustrates what I'm going for - https://community.alteryx.com/

Would anyone like to take on the challenge of sharing some quick code that would do this and tell me where to put it!? I don't need the whole left nav styled but if someone would like to take a stab at helping put a placeholder left nav bar, that would be awesome!!!

PS... I know that we could pay someone to do this custom dev work but I'm hoping to connect with other community members to collaborate together on a solution!

Parents