How to add links to a Shopify header-bar using Liquid Markup? - shopify

Question

I am trying to customize my shopify store's header-bar by adding small links on the left side of the shopping cart icon at the very top of the page.
Here's a quick example i got from http://www.homedepot.com/ of what i am looking to do.
" Tool & Truck Rental | Installation Services and Repair| Gift Cards | Help" links on left side of the small shopping cart/checkout icon.
That is exactly what I am trying to do with my page but the links i created are not horizontal (even after trying CSS display:inline) and making the shopping cart icon move out of it's proper place.
This is what i have tried.
I added a Snippet called "header-bar-nav.liquid" with code:
<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 %}>
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li {% if link.active %}class="header-bar-nav--active"{% endif %}>
{{ link.title }}
</li>
{% endif %}
{% endfor %}
</ul>
And I did a {% include 'header-bar-nav' %} in the actual "header-bar.liquid" (which is where i would like the small links to be)
<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>
{{ 'layout.customer.account' | t }}
</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>
And I used the .header-bar-nav class and added a CSS to the timber.scss.liquid under "Assets"
.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;
}
}
For some reason, It has not been working for me. Please, if anybody can help it would be greatly appreciated.

Answer 1

Easiest way to accomplish it is fire up Chrome, go to Dev Tools and add stuff manually.
Then try whatever CSS makes it work. If the theme's responsive, make sure it works when you resize the browser window.
Once you find what you're looking for, just copy those styles/CSS into your theme.
This really doesn't have anything to do with Shopify, but is a CSS question. If you are still unable to make it work, post it in CSS with a link to your website and someone there will help you out.