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
  • 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.

Children
  • So where is the top level CSS where I could adjust the site-wide <body> element? I actually want it to be contained between the header and footer. Where would I go to modify that particular <body> element?

  •  What i'd like to do is frame the current body, between header and footer, and the custom system layout, in a div/container at 100% width (ie. the "Div2" depicted in the attached image), while having a div/container to the left (ie. Div1 in the attached image) that has a width of 100px and sits between the header and footer (like the OOTB theme layouts do.) I'd also like this left nav div to disappear in single column mode.

  • You can adjust styling anywhere. You could even do it in the custom widget that renders the navigation with an inline <style></style> block or add it to the site theme's CSS by editing the theme.

  • For this, you'll need to handle some javascript as well. I'd recommend positioning your navigation via position:fixed with a top equal to the height of the header (which can change, so you'll need to either periodically measure it with javascript to reposition your navigation and adjust its height.

    To hide when going into single column mode, you can use

    $.telligent.evolution.messaging.subscribe('reflow.reflowstart', function(d) {
        if (d.target.is('.single-column')) {
            // TODO: hide your nav
        } else {
            // TODO: show your nav
        }
    });

  • 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>
    
    

  • It appears (on this site at least), that the group banner has a z-index of 10 when scrolled and fixed. Could you try your footer placement with a z-index of 11 instead of 4?

  • Nailed it ! Thank you so much for all your help on this!