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 Reply
  • Hey  I've added an unfiltered html widget to my footer and tweaked my code a bit to get everything working as I'd like... but there's one more conundrum I'd love some help with!

    ✦ When I put the html widget with my custom side nav in the header, it works perfectly but it prevents the "conversations" widget from opening. The good thing though is that my custom side nav stays ABOVE the Group Banner, when it gets smaller as you scroll down a sub-group page.

    ✦  When I put the html widget with my custom side nav in the footer, it does not prevent the "conversations" widget from opening. Score! The bad thing though is that when you scroll down on a sub-group page, the Group Banner pops out ABOVE my custom side nav.

    Here's a video to explain/show what's happening now...

    Here's the code that's in my unfiltered html custom side nav widget, and a FIDDLE:

    <style>
    
    @media all and (min-width:670px) {
     
    body {
      padding-left: 100px;
    }
     
    }
    
    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    
    .navback {
      position: fixed;
      top: 0;
      left: 0px;
      width: 100px;
      height: 100%;
      background: #283237;
      z-index: 4;
    }
    
    .navbar {
      position: fixed;
      top: 88px;
      left: 0px;
      width: 100px;
      height: 60vh;
      background: #283237;
      display: flex;
      z-index: 5;
      flex-direction: column;
    }
    
    .topbar {
      border-top: 1px solid #000;
      top: 44px;
    }
    
    .navbar .item {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding-top: 40px;
      padding-bottom: 40px;
      max-height: 100px;
      z-index: 5;
    }
     
    .navbar .item div.label {
      color: #fff;
      position: relative;
      top: 5px;
      font-size: 13px;
      font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
      transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
      left: -100px;
    }
    
    .navbar:hover .item .label {
      left: 0px;
    }
    
    hr {
      border: 0;
      height: 1px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
      }
    
    .leftnav a {
      text-decoration: none;
    }
    
    .leftnav a:hover {
      color: #fff;
      text-decoration: none;
    }
    
    </style>
    
    
    <body>
        <div class="topbar"></div>
      <div class="navback leftnav">
    <div class="navbar">
      <div class="item hvr-shrink">
        <a href="https://community.canopytax.com/">
        <div>
            <img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
          <div class="label">Home</div>
        </div>
      </a>
      </div>
    
      <div class="item hvr-shrink">
        <a href="https://community.canopytax.com/community-central/">
        <div>
          <img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
          <div class="label">Central</div>
        </div>
      </a>
      </div>
      
      <div class="item hvr-shrink">
        <a href="https://community.canopytax.com/questions-discussions/">
        <div>
          <img src="https://png.icons8.com/ios/35/ffffff/chat.png">
          <div class="label">Questions</div>
        </div>
      </a>
      </div>
    
      <div class="item hvr-shrink">
        <a href="https://community.canopytax.com/resources-shared-practices/">
        <div>
          <img src="https://png.icons8.com/ios/35/ffffff/trust.png">
          <div class="label">Resources</div>
        </div>
      </a>
      </div>
    
      <div class="item hvr-shrink">
        <a href="https://community.canopytax.com/tax-accounting-events/">
        <div>
          <img src="https://png.icons8.com/ios/35/ffffff/overtime.png">
          <div class="label">Events</div>
        </div>
      </a>
      </div>
    
      <div class="item hvr-shrink">
        <a href="https://community.canopytax.com/canopy-corner/">
        <div>
          <img style="height: 40px; width:40px;" src="https://community.canopytax.com/cfs-filesystemfile/__key/communityserver-components-sitefiles/Assets/Canopy-White-Emblem-Circle-100x100.png?_=636602351023702639">
          <div class="label">Canopy</div>
        </div>
      </a>
      </div>
      <hr />
    </div>
    </div>
    
    </body>
    
    

Children