0

我正在尝试通过在页面顶部的购物车图标左侧添加小链接来自定义我的 shopify 商店的标题栏。

这是我从 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>

我在实际的“header-bar.liquid”中做了一个 {% include 'header-bar-nav' %} （这是我想要小链接的地方）

<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 类并在“资产”下的 wood.scss.liquid 中添加了一个 CSS 

.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;
  }
}

出于某种原因，它对我不起作用。请，如果有人可以提供帮助，将不胜感激。

4

1 回答 1

1

完成它的最简单方法是启动 Chrome，转到开发工具并手动添加内容。

然后尝试任何 CSS 使它工作。如果主题是响应式的，请确保在调整浏览器窗口大小时它可以正常工作。

找到所需内容后，只需将这些样式/CSS 复制到您的主题中即可。

这真的与 Shopify 没有任何关系，而是一个 CSS 问题。如果您仍然无法使其正常工作，请将其发布在 CSS 中并附上您网站的链接，那里的人会帮助您。

于 2015-10-25T00:38:11.803 回答