Forum Discussion
Parshant
Boss
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
6 years agoExpert
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>
Related Content
- 18 days ago
- 3 years ago
- 2 years ago