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!
You'd probably be looking at a locked footer widget with HTML/CSS for the look/feel and positioning.
I can't figure this out. If I was designing my own page, I could figure it out, but I don't know how to drop my custom code to the left of the main telligent display.
Here's a video where I explain my concern and try to articulate my issue/request a little better...
Have you tried a higher z-index? I also wonder what would happen if you wrapped all of the HTML code in the register end of page html method. It might take it out of the main widget zones and allow you to get around the overlay problem...not sure though
## your code
Yeah that didn't seem to work, but it's likely I'm not configuring it properly.
Ben Tiedt or Michael Monteleone do either of you have any insight on how we could accomplish this?
That may be difficult because the Social theme makes use of position: fixed elements which ignore the regular layout parent positioning and align with the overall document, so all position: fixed areas of the page will need to be explicitly resized to allow room for the sidebar.
Without respect to position:fixed elements, you could add left margin or padding to the <body> element to provide room for your left navigation and cause most of the page's content to shift over (left margin/padding equal to the outer width of your left navigation).
Then you'll just need to resolve or work-around issues with fixed elements such as the site, group, and user banners.