Блог

Я разработал новый сайт с использованием фреймворка Timber в Shopify, и теперь я пытаюсь разобраться с адаптивной стороной, чтобы убедиться, что это работает на всех устройствах должным образом.

Проблема, с которой я в настоящее время сталкиваюсь, заключается в том, что при изменении размера экрана ниже 768 пикселей меню рабочего стола исчезает, и это нормально, но меню вообще не отображается, и я не уверен, почему это так. Изначально, когда я добавил каркас Timber, это работало, и я просмотрел тему.жидкий файл, но не может понять, почему это происходит.

Сам сайт можно просмотреть по адресу: http://www.prontaprint247.com

Если кто-нибудь может, пожалуйста, посоветуйте, где я ошибся, так как не уверен, как исправить эту проблему.

Любая помощь или совет будут оценены.

Мой код меню в теме.жидкость

 <div id="NavDrawer" class="drawer drawer--left">
    <div class="drawer__header">
      <div class="drawer__title h3">{{ 'layout.drawers.browse' | t }}</div>
      <div class="drawer__close js-drawer-close">
        <button type="button" class="icon-fallback-text">
          <span class="icon icon-x" aria-hidden="true"></span>
          <span class="fallback-text">{{ 'layout.drawers.close_menu' | t }}</span>
        </button>
      </div>
    </div>
    <!-- begin mobile-nav -->
    <ul class="mobile-nav">
      <li class="mobile-nav__item mobile-nav__search">
        {% include 'search-bar' %}
      </li>
      {% for link in linklists.main-menu.links %}
        {% comment %}
          Create a dropdown menu by naming a linklist the same as a link in the parent nav

          More info on dropdowns:
            - http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu
        {% endcomment %}
        {% assign child_list_handle = link.title | handleize %}
        {% if linklists[child_list_handle].links != blank %}
          <li class="mobile-nav__item{% if link.active %} mobile-nav__item--active{% endif %}" aria-haspopup="true">
            <div class="mobile-nav__has-sublist">
              <a href="{{ link.url }}" class="mobile-nav__link">{{ link.title }}</a>
              <div class="mobile-nav__toggle">
                <button type="button" class="icon-fallback-text mobile-nav__toggle-open">
                  <span class="icon icon-plus" aria-hidden="true"></span>
                  <span class="fallback-text">See More</span>
                </button>
                <button type="button" class="icon-fallback-text mobile-nav__toggle-close">
                  <span class="icon icon-minus" aria-hidden="true"></span>
                  <span class="fallback-text">{{ 'cart.general.close_cart' | t | json }}</span>
                </button>
              </div>
            </div>
            <ul class="mobile-nav__sublist">
              {% for childlink in linklists[child_list_handle].links %}
                <li class="mobile-nav__item {% if childlink.active %} mobile-nav__item--active{% endif %}">
                  <a href="{{ childlink.url }}" class="mobile-nav__link">{{ childlink.title | escape }}</a>
                </li>
              {% endfor %}
            </ul>
          </li>
        {% else %}
          <li class="mobile-nav__item{% if link.active %} mobile-nav__item--active{% endif %}">
            <a href="{{ link.url }}" class="mobile-nav__link">{{ link.title }}</a>
          </li>
        {% endif %}
      {% endfor %}

      {% comment %}
        If customer accounts are enabled, provide login and create account links
      {% endcomment %}
      {% if shop.customer_accounts_enabled %}
        {% if customer %}
          <li class="mobile-nav__item">
            {% if customer.first_name != blank %}
              {% capture first_name %}{{ customer.first_name }}{% endcapture %}
              <a href="/account">{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}</a>
            {% else %}
              <a href="/account">{{ 'layout.customer.account' | t }}</a>
            {% endif %}
          </li>
          <li class="mobile-nav__item">
            {{ 'layout.customer.log_out' | t | customer_logout_link }}
          </li>
        {% else %}
          <li class="mobile-nav__item">
            {{ 'layout.customer.log_in' | t | customer_login_link }}
          </li>
          <li class="mobile-nav__item">
            {{ 'layout.customer.create_account' | t | customer_register_link }}
          </li>
        {% endif %}
      {% endif %}
    </ul>
    <!-- //mobile-nav -->
  </div>