We are going to design Menu in 4 Levels .
We would like to appear menu level 3 in sub menu <div> from Menu level 2 .
I am trying this code :
{% for child in node %}
{% if child.level=='2' %}
<div class="col-lg-4 mb-4">
<a href="#" class="dropdown-menu_title">{{ child.label }}</a>
<div class="py-2">
{% if child.level== '3' %}
<a href="#">{{ child.label }}</a>
{% endif %}
</div>
</div>
{% endif %}
% endfor %}
Submenu not appear .
Result :
once I move it out .
Using this code :
{% for child in node %}
{% if child.level=='2' %}
<div class="col-lg-4 mb-4">
<a href="#" class="dropdown-menu_title">{{ child.label }}</a>
</div>
{% endif %}
<div class="py-2">
{% if child.level== '3' %}
<a href="#">{{ child.label }}</a>
{% endif %}
</div>
{% endfor %}
Result :
Submenu will appear but outside the <div> I have to include it inside <div> to appear as the original style .
Also I tried this :
<div class="col-lg-4 mb-4">
{% if child.level=='2' %}
<a href="#" class="dropdown-menu_title">{{ child.label }}</a>
{% endif %}
<div class="py-2">
{% if child.level== '3' %}
<a href="#">{{ child.label }}</a>
{% endif %}
</div>
</div>
Result :
In HTML code looks perfect in local terminal .
Original HTML code :
<div class="row mb-4">
<div class="col-lg-4 mb-4">
<a href="/themes/" class="dropdown-menu_title">Themes</a>
<div class="py-2">
<a href="#">Food Safety & Chain Control</a>
<a href="#">Health Benefits</a>
<a href="#">Protein Transition</a>
<a href="#">Smart Processing</a>
</div>
</div>
</div>
Result :
Thanks in advance for any advice for this problem.