Third Child Item in Navigation Menu not Displaying

[MSchiess]

Hi There,

I have added a third child item to (submenu level-3) to my navigation menu but when I go to the website, that third item does not appear. It appears that the template restricts the navigation display to only one child item. I’ve inherited this template so I’m not sure how it was built, but I believe I’ve isolated the issue to this menu_section module.

Spoiler

{% macro defaultItemClasses() %}
{{
{
“class”: “no-submenu menu-item”
}|xmlattr
}}
{% endmacro %}

{% macro childClasses() %}
{{
{
“class”: “has-submenu menu-item”
}|xmlattr
}}
{% endmacro %}

{% macro activeNode() %}
{{
{“class”: “menu-link active-item”,
“aria-current”: “page”}|xmlattr

}}
{% endmacro %}
{% macro activeBranch() %}
{{
{“class”: “menu-link active-branch”}|xmlattr
}}
{% endmacro %}
{% macro linkTarget() %}
{{
{“target”: “_blank”}|xmlattr
}}
{% endmacro %}

{% macro link(node) %}

<li {{ childClasses() if node.children else defaultItemClasses() }}>
<a href=“{{ node.url if node.url else ‘javascript&colon;;’ }}” class=“menu-link” {{ activeBranch() if node.activeBranch }} {{ activeNode() if node.activeNode }} {{ linkTarget() if node.linkTarget }}>
<span class=“link-txt”><span class=“link-ext”></span><span class=“txt”> {{ node.label }}<span class=“submenu-expander”> <i class=“fa fa-angle-down”></i> </span></span></span></a>

{% if node.children %}
{% endif %}
{% if node.children %}

{{ renderNavigation(node) }}
{% endif %}
</li>
{% endmacro %}

{% macro renderNavigation(menuTree) %}

{% set level = level + 1 %}

<ul class=“submenu level-{{ level }}” aria-hidden=“{{ level != 1 }}”>

{% for node in menuTree.children %}
{{ link(node) }}
{% endfor %}
</ul>
{% endmacro %}

<nav aria-label=“Main menu” class=“navigation-primary”>
{{ renderNavigation(menu(module.primary_menu_field)) }}
</nav>

I’m not well versed in HTML, but was hoping someone might be able to catch the issue here as to why the level 3 submenu item is not displaying. Here is the live page for testing purposes if helpful: https://www.crosschq.com/

Thank you in advance if someone can spot the issue

[Anton]

Hi @MSchiess,

this comes most likely from

@media screen and (min-width: 1200px){
.main-menu .navigation-primary>ul ul {
...
display: none;
...
}

and since you change the state of a dropdown with the class “.level-2” via JS but not of clicked elements where the child has “.level-3” it’s always hidden.

Try modifying the JS a bit like this

$(document).ready(function() {
 $("a.menu-link").click(function() {
 if ($(this).siblings().hasClass("level-3")) {
 $(this).siblings().toggleClass("visible");
 } else {
 $(this).siblings().removeClass("visible");
 }
 });
});

the visible class got display:block like this

@media screen and (min-width: 1200px){
.level-3.visible {
display: block;
}

a Tipp: If you already got such classes - use them; don’t just add new classes

best,

Anton