The request from the client was to create a sale page for Black Friday and to highlight the link in the Main Navigation. First we created a collection called 'Sale' and made the product conditions to be "Compare at Price" "is Greater than" "0" and "Inventory Stock" " is Greater than" "0"
This created the collection. Now we create a link to that collection page, '/collections/sale/'. With a specific title we will reference later on.
No to make that link stand out, we need to apply some crafty CSS along with some conditional LIQUID logic.
Next we need to EDIT CODE for your main navigation links within your theme. Often I recommend duplicating your live theme before tinkering with any theme's code. Next find either the SECTION called HEADER or a SECTION which contains the word "link" in it. In this particular case the theme was Turbo by Out of the Sandbox. The 'linklist' as it is referenced in SHOPIFY was contained in the "sub-links.liquid" section. Nestled within its 'linklist' loop was the piece I was looking for...
<li>
<a href="{{ sublink.url }}">{{ sublink.title }}</a>
</li>
Because this is the 'linklist' LOOP it means every link will follow this same styling. To change things up I'll have to pour some LIQUID on it. I want to specify within the loop that if the title of my link is 'Black Friday' or 'Sale', that I will insert an additional class which is referenced at the end of the file.
<li>
<style>
<a href="{{ sublink.url }}">{% if sublink.title == 'Black Friday Sale' or sublink.title == 'Sale' %}<span class="sale_nav">{% endif %}{{ sublink.title }}{% if sublink.title == 'Black Friday Sale' or sublink.title == 'Sale' %}</span>{% endif %}</a>
</li>
.sale_nav {
color: {{ '#D54D4D' | color_modify: 'alpha', 0.85 }} !important;
text-transform: none !important;
}
.sale_nav:hover{
color: {{ '#D54D4D' | color_modify: 'alpha', 1 }} !important;
text-transform: none;
}
</style>
As you can see above I have referenced link title 'Black Friday Sale' and 'Sale' for good measure. Now if a link has this title it will apply the styling I have created below the 'linklist' loop. I also used LIQUID's 'color_modify' filter which allows you to add a transparency value to a hexadecimal color value.