mtb_dcatadmin_plus/resources/appearance/screen_protector_solutions/_header.liquid

<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-orange">

        <div class="container">
            {% if site.dist.logo %}
            <a class="header-logo position-absolute start-0 translate-middle-y" style="top:50%; z-index: 1000" href="/"><img src="{{ site.image_base_url }}{{ site.dist.logo }}" height="115px"></a>
            {% endif %}

            <div class="navbar-toggler-container position-absolute ">
                <button class="navbar-toggler " type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarNav"
                        aria-controls="navbarNav"
                        aria-expanded="false"
                        aria-label="切换导航">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    {% for menu in site.menus_header %}
                        <li class="nav-item {% if menu.children and menu.children.size > 0 %}dropdown{% endif %}">
                            {% if menu.children and menu.children.size > 0 %}
                                <a  class="nav-link dropdown-toggle"  id="protetoresTelasDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="{% if menu.children and menu.children.size > 0 %}#{% else %}{{ menu.uri }}{% endif %}">
                                    {{ menu.title }}
                                </a>
                            {% else %}
                                <a class="nav-link" href="{% if menu.children and menu.children.size > 0 %}#{% else %}{{ menu.uri }}{% endif %}">
                                    {{ menu.title }}
                                </a>
                            {% endif %}
                            {% if menu.children and menu.children.size > 0 %}
                                <ul class="dropdown-menu w-100 p-0">
                                    <div class="container py-3" style="max-width: 90%; margin: 0 auto;">
                                        <div class="row g-4">
                                            {% for child in menu.children %}
                                            <div class="col-4">
                                                <div class="d-flex align-items-start">

                                                    <div class="flex-shrink-0">
                                                        {%  if child.image_url %}
                                                        <img src="{{ site.asset_base_url }}{{ child.image_url }}"
                                                             class="img-fluid rounded"
                                                             style="width: 100%; height: 100%; object-fit: cover;">
                                                        {% else %}
                                                            <img src="{{ site.asset_base_url }}static/tpl/screen_protector_solutions/image/product_default.jpg"
                                                                 class="img-fluid rounded"
                                                                 style="width: 100%; height: 100%; object-fit: cover;">
                                                        {% endif %}
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <h6 class="mb-2 fw-bold"><a href="{{ child.uri }}" class="text-decoration-none text-reset">{{ child.title }}</a></h6>
                                                        <div class="d-flex flex-column">
                                                            {% for item in child.children %}
                                                            <a href="{{ item.uri }}" class="text-decoration-none text-reset mb-1 small">{{ item.title }}</a>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </ul>
                            {% endif %}
                        </li>
                    {% endfor %}

                </ul>
            </div>
        </div>
    </nav>
</header>