Bootstrap 3 menu: Doesn't drop-down, no auto collapse

Question

I am using OpenCart 3, Bootstrap 3. Focus on these lines:

<li><a href="#">Sản phẩm</a>
    {% for category in categories %}
        <ul class="list-unstyled dropdown">
            <a href="{{ category.href }}">{{ category.name }}</a>
        </ul>
    {% endfor %}
</li>

Full contents of file menu.twig:

{% if categories %}
    <div class="container">
        <nav id="menu" class="navbar">
            <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
                <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Trang chủ</a></li>

                    <li><a href="#">Sản phẩm</a>
                        {% for category in categories %}
                            <ul class="list-unstyled dropdown">
                                <a href="{{ category.href }}">{{ category.name }}</a>
                            </ul>
                        {% endfor %}
                    </li>

                    <li><a href="#">Dịch vụ</a></li>
                    <li><a href="#">Tư vấn</a></li>
                    <li><a href="#">Công nghệ</a></li>
                    <li><a href="#">Tin tức</a></li>
                    <li><a href="#">Giới thiệu</a></li>
                    <li><a href="#">Tuyển dụng</a></li>
                    <li><a href="{{ contact }}">Liên hệ</a></li>

                    {#{% for category in categories %}#}
                        {#{% if category.children %}#}
                            {#<li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle"#}
                                                    {#data-toggle="dropdown">{{ category.name }}</a>#}
                                {#<div class="dropdown-menu">#}
                                    {#<div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}#}
                                            {#<ul class="list-unstyled">#}
                                                {#{% for child in children %}#}
                                                    {#<li><a href="{{ child.href }}">{{ child.name }}</a></li>#}
                                                {#{% endfor %}#}
                                            {#</ul>#}
                                        {#{% endfor %}</div>#}
                                    {#<a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a>#}
                                {#</div>#}
                            {#</li>#}
                        {#{% else %}#}
                            {#<li><a href="{{ category.href }}">{{ category.name }}</a></li>#}
                        {#{% endif %}#}
                    {#{% endfor %}#}



                </ul>
            </div>
        </nav>
    </div>
{% endif %}

Menu cannot auto collapse, and display incorrectly.

How to fix menu?

Answer 1

To fix the dropdown-menu replace:

<li><a href="#">Sản phẩm</a>
  {% for category in categories %}
  <ul class="list-unstyled dropdown">
    <a href="{{ category.href }}">{{ category.name }}</a>
  </ul>
 {% endfor %}
</li>

With:

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Sản phẩm
  <span class="caret"></span></a>
  <ul class="dropdown-menu">
  {% for category in categories %}
    <li><a href="{{ category.href }}">{{ category.name }}</a></li>
    {% endfor %}
  </ul>
</li>

It doesn't collapse cause your collapse code looks wrong. You have to replace your "navbar-header" class div with:

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

Check the documentation. Scroll down to the bottom to "Collapsing The Navigation Bar".

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp