Forum Discussion

RyanMcClelland's avatar
6 years ago

Nested Category Not Displaying in Navigation

I've searched the forum and didn't find a solution. We're adding a large number of discussion forums, so I'd like to house these within a category inside the larger Discussions category. This is what it looks like in the admin tool:

The reason I'm doing this is so the 15 forums don't clog up the navigation menu. I was expecting to see the new Investing Forums category within the navigation tray under Discussions, but it is not visible.

Is there an admin setting I'm missing, or is a code change necessary?

  • RyanMcClelland,

    Your community navigation is running with custom code.

    OOB navigation of new responsive design is similar to that we have in KHOROS community.

    You need to update the code for community navigation.

    You can get the nested categories using below code replacing [parent_category_name].

    SELECT * FROM categories WHERE ancestor_categories.id = '[parent_category_name]'

     

    • RyanMcClelland's avatar
      RyanMcClelland
      Expert

      Thanks for your suggestion, Parshant! Looking in Studio, I'm guessing the custom component I need to edit is custom.top-navigation. However, I do not see the object you refer to. This is the code:

      <#-----
      
      Creates a horizontal navigation component for desktop. At smaller view ports the slide out menu will be used instead. The component supports
      between 1 - 3 levels of nesting. See documentation for visual examples.
      
      Options:
          depth = [number] the levels of community structure to be shown in the nav
          communityLink = [true/false] show a community home link
      
      -->
      <@liaMarkupCache ttl="10000" anonymousOnly="true" />
      <#include "theme-lib.common-functions.ftl" />
      <@compress single_line=true>
      <#assign communityLink = env.context.component.getParameter("communityLink")!"true" />
      
      <#assign liql_query = "SELECT id, view_href, title, short_title,description FROM categories WHERE depth=1 AND hidden=false ORDER BY position ASC" />
      <#assign tlc = executeLiQLQuery(liql_query) />
      
      <#assign liql_query = "SELECT id, view_href, title, short_title FROM boards WHERE depth=1 AND hidden=false ORDER BY position ASC" />
      <#assign boards = executeLiQLQuery(liql_query) />
      
      <nav class="mds-site-navigation visible-lg-block">
          <ul class="mds-site-navigation__list">
              <#if communityLink == "true">
                  <li class="mds-site-navigation__list-item <#if page.name=='CommunityPage'>mds-site-navigation__list-item--active</#if>">
                      <div class="mds-site-navigation__list-item-inner">
                      <a aria-label="${text.format("general.Community")}" class="mds-button mds-button--large mds-button--flat-no-background mds-site-navigation__button" href="/" role="button">${text.format("general.Community")}</a>
                      </div>
                  </li>
              </#if>
              <#list tlc as nav>
      
                <#assign hasChildren = false>
                <#assign boardCount = rest("/categories/id/${nav.id}/boards/nested/count").value!"0" />
                <#assign catCount = rest("/categories/id/${nav.id}/categories/nested/count").value!"0" />
                <#if (boardCount?? && boardCount?number gt 0) || (catCount?? && catCount?number gt 0) >
                    <#assign hasChildren = true>
                </#if>
               
      
                <li class="mds-site-navigation__list-item <#if coreNode.id == nav.id || coreNode.hasAncestor(nav.id)>mds-site-navigation__list-item--active</#if>">
                    <div class="mds-site-navigation__list-item-inner">
                        <#if hasChildren>
                            <button class="mds-button mds-button--large mds-button--flat-no-background mds-site-navigation__button" type="button" data-mds-navigation-container-target="site-nav-navigation-container-${nav?index}" role="button">
                                <span class="mds-button__text">
                                  <#if (nav.title)??>${nav.title}</#if>    
                                </span>
                                <svg class="mds-icon mds-button__icon mds-button__icon--right" aria-hidden="true">
                                    <use xlink:href="/html/assets/mds_icons.svg#caret-down--s"> </use>
                                </svg>
                            </button>
                        <#else>
                            <a class="mds-button mds-button--large mds-button--flat-no-background mds-site-navigation__button" href="${nav.view_href}" role="button"><#if (nav.short_title)??>${nav.short_title}<#else>${nav.title}</#if></a>
                        </#if>
                    </div>
                    <div id="site-nav-navigation-container-${nav?index}" class="mds-navigation-container mds-container--dark">
                      <div class="mds-components-close-dropdown"><button aria-label="${text.format("images.button_dialog_close.alt")}" type="button" role="button" class="mds-button mds-button mds-button--icon-only mds-doc-icon-swatch--small"><svg aria-labelledby="title" class="mds-icon mds-button__icon mds-button__icon--left"><title>remove</title> <use xmlns:xlink="<a href="http😕/www.w3.org/1999/xlink" target="_blank">http😕/www.w3.org/1999/xlink</a>" xlink:href="/html/assets/mds_icons.svg#remove"></use></svg></button></div>
                        <div class="lia-quilt-row">
                          <div class="lia-quilt-column-06">
                            <div class="title"><a href="${nav.view_href}"><#if (nav.short_title)??>${nav.short_title}<#else>${nav.title}</#if></a></div>
                            <div class="description"><a href="${nav.view_href}"><#if (nav.description)??>${nav.description}</#if></a></div>
                          </div>
                          <#assign liql_query2 = "SELECT short_title, title, view_href, id, description FROM boards WHERE depth=2 AND parent_category.id='${nav.id}' AND hidden=false ORDER BY position ASC" />
                          <#assign subBoards = executeLiQLQuery(liql_query2) />
                          <div class="lia-quilt-column-18">
                          <div class="baords-container">
                          <#list subBoards as subboard>
                              <div class="lia-quilt-column-08 boards">
                                <div class="title"><a href="${subboard.view_href}"><#if (subboard.short_title)??>${subboard.short_title}<#else>${subboard.title}</#if></a></div>
                                <div class="description"><#if (subboard.description)??><a aria-label="${subboard.title}" href="${subboard.view_href}">${subboard.description}</a></#if></div>
                              </div>
                          </#list>
                          </div>
                          </div>
                        </div>
                    </div>
                </li>
              </#list>
              <#if user.registered>
            	<li>
                <a href="/t5/forums/postpage/board-id/@support" aria-label='${text.format("menubar.create_support_case")}' title='${text.format("menubar.create_support_case")}' class="create-case-btn lia-button lia-button-primary">${text.format("menubar.create_support_case")}</a>
            	</li>
            	</#if>
          </ul>
      </nav>
      <@liaAddScript>
        ;(function($) {
          $(document).ready(function () {
            $('body').on('click', '.mds-site-navigation .mds-site-navigation__button',function(e) {
              $('.mds-navigation-container').removeClass('mds-navigation-container--visible');
              $('#'+$(this).data("mds-navigation-container-target")).addClass('mds-navigation-container--visible');
              
            });
            $('.mds-components-close-dropdown .mds-button').click(function(){
                $('.mds-navigation-container').removeClass('mds-navigation-container--visible');
            });
          });
        })(LITHIUM.jQuery);
      </@liaAddScript>
      </@compress>
      • RyanMcClelland's avatar
        RyanMcClelland
        Expert

        I'll add the out of the box responsive menu that appears when the browser window is scaled down does show the nested category I want to appear in the custom top nav.

    • RyanMcClelland's avatar
      RyanMcClelland
      Expert

      FYI Parshant I tried using the snippet below and it didn't work. Now I don't see the forum names under Discussions at all, so I did something wrong.

      </div>
                          <#assign liql_query2 = "SELECT * FROM categories WHERE ancestor_categories.id = '[parent_category_name]' AND hidden=false ORDER BY position ASC" />
                          <#assign subBoards = executeLiQLQuery(liql_query2) />
  • Looks like all of that is custom development that was done.  I checked the Morningstar site and looks like it is all just a custom navigation bar being used.