Forum Discussion
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
6 years agoExpert
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.
Related Content
- 4 years ago
- 11 months ago