Как добавить ссылки на панель заголовка Shopify с помощью Liquid Markup?

Question

Я пытаюсь настроить панель заголовка моего магазина, добавив небольшие ссылки в левой части значка корзины покупок в самом верху страницы.

Вот краткий пример того, что я собираюсь сделать на http://www.homedepot.com/.

Ссылки "Прокат инструментов и грузовиков | Услуги по установке и ремонту | Подарочные карты | Справка" находятся в левой части небольшого значка корзины покупок / оформления заказа.

Это именно то, что я пытаюсь сделать со своей страницей, но созданные мной ссылки не горизонтальны (даже после попытки CSS display:inline) и заставляют значок корзины покупок перемещаться из своего места.

Это то, что я пытался. Я добавил фрагмент с названием "header-bar-nav.liquid" с кодом:

  <ul class="header-bar-nav" id="AccessibleNav">
      {% for link in linklists.header-bar.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="header-bar-nav--has-dropdown{% if link.active %} header-bar-nav--active{% endif %}" aria-haspopup="true">
            <a href="{{ link.url }}" class="header-bar-nav__link">
              {{ link.title }}
              <span class="icon-fallback-text">
                <span class="icon icon-arrow-down" aria-hidden="true"></span>
              </span>
            </a>
            <ul class="header-bar-nav__dropdown">
              {% for childlink in linklists[child_list_handle].links %}
                <li{% if childlink.active %} class="header-bar-nav--active"{% endif %}>
                  <a href="{{ childlink.url }}" class="header-bar-nav__link">{{ childlink.title | escape }}</a>
                </li>
              {% endfor %}
            </ul>
          </li>
        {% else %}
          <li {% if link.active %}class="header-bar-nav--active"{% endif %}>
            <a href="{{ link.url }}" class="header-bar-nav__link">{{ link.title }}</a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>

И я сделал {% include 'header-bar-nav' %} в фактическом "header-bar.liquid" (именно там я хотел бы, чтобы небольшие ссылки были)

<div class="header-bar">
  <div class="wrapper medium-down--hide">
    <div class="large--display-table">
      <div class="header-bar__left large--display-table-cell">
        {% if settings.header_message != blank %}
        <div class="header-bar__module header-bar__message">
          {{ settings.header_message }}
        </div>
        {% elsif cart.announcements.size > 0 %}
        <div class="header-bar__module header-bar__message">
          {{ cart.announcements.first }}
        </div>
        {% endif %}
      </div>

       {% include 'header-bar-nav'%}

      <div class="header-bar__right large--display-table-cell">
        <div class="header-bar__module">
          <a href="/cart" class="cart-toggle">
            <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
            {{ 'layout.cart.title' | t }}
            <span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
          </a>
        </div>

        {% if shop.customer_accounts_enabled %}
          <span class="header-bar__sep" aria-hidden="true">|</span>
          <ul class="header-bar__module header-bar__module--list">
            {% if customer %}
              <li>
                <a href="/account">{{ 'layout.customer.account' | t }}</a>
              </li>
              <li>
                {{ 'layout.customer.log_out' | t | customer_logout_link }}
              </li>
            {% else %}
              <li>
                {{ 'layout.customer.log_in' | t | customer_login_link }}
              </li>
            {% endif %}
          </ul>
        {% endif %}

        {% if settings.header_search_enable %}
          <div class="header-bar__module header-bar__search">
            {% include 'search-bar' with 'header' %}
          </div>
        {% endif %}



      </div>
    </div>
  </div>
  <div class="wrapper large--hide">
    <button type="button" class="mobile-nav-trigger" id="MobileNavTrigger">
      <span class="icon icon-hamburger" aria-hidden="true"></span>
      {{ 'layout.navigation.menu' | t }}
    </button>
    <a href="/cart" class="cart-toggle mobile-cart-toggle">
      <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
      {{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
    </a>
  </div>
  {% include 'mobile-nav' %}
</div>

И я использовал класс.header-bar-nav и добавил CSS в timber.scss.liquid в разделе "Активы"

.header-bar-nav {
  font-size: em(16px);
  cursor: default;
  margin: 0 auto;
  text-align: center;

  li {
    margin: 0;
    display: block;
  }

  & > li {
    position: relative;
    display: inline-block;



    &:first-child .header-bar-nav__dropdown {
      left: - $gutter / 2;
    }

    &:last-child > a {
      padding-right: 0;
    }
  }

  @include at-query ($min, $large) {
    margin: 0;
    text-align: right;
  }
}

.header-bar-nav__link {
  display: block;
  text-decoration: none;
  padding: $gutter / 2;
  white-space: nowrap;
  color: $colorNavText;

  &:hover,
  &:active,
  &:focus {
    color: $colorPrimary;
  }


  .icon-arrow-down {
    font-size: 0.7em;
    color: $colorPrimary;
  }
}

По какой-то причине, это не работает для меня. Пожалуйста, если кто-нибудь может помочь, это будет очень признателен.

Answer 1

Самый простой способ сделать это - запустить Chrome, перейти к Dev Tools и добавить материал вручную.

Затем попробуйте все, что CSS делает это работает. Если тема отзывчива, убедитесь, что она работает при изменении размера окна браузера.

Как только вы найдете то, что ищете, просто скопируйте эти стили /CSS в свою тему.

Это на самом деле не имеет ничего общего с Shopify, но это вопрос CSS. Если вы все еще не можете заставить его работать, опубликуйте его в CSS со ссылкой на ваш сайт, и кто-то там вам поможет.