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

Question

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

Here's a quick example i got from http://www.homedepot.com/ of what i am looking to do.

«Инструмент & Грузовик Аренда | Монтаж и ремонт | Подарочные карты | Помощь» ссылка на левой стороне торгового маленького значка тележки/проверке.

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

Это то, что я пробовал. Я добавил Отрывок называется «заголовок-бар-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> 

И я сделал {% включаю «заголовок-бар-нав»%} в действительном «заголовке-баре .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-бар-нав и добавил 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 со ссылкой на ваш сайт, и кто-то там поможет вам.