Theme: Debut

Last version(s) tested: 13.0.0

Recommended design time: 10 minutes

This customization allows merchants to change the text color of a specific nav item.

This customization will work for other themes, you will just need to slightly modifiy where you place the {% if %} statements and modify some class names.

What you have

What you want

Step one: In the header.liquid file, add the following code at the very top of the file.

{% if section.settings.change_text_color_of_specific_nav_item %}
<style>
  .selected-nav-item a, .selected-nav-item  .site-nav__link--button {
    color: {{ section.settings.text_color_of_specific_nav_item }};
  }
</style>
{% endif %}
 
{% assign indexOfSpecificNavItem = section.settings.index_of_specific_nav_item | round %}

Step two: In the header.liquid file, add the following code inside the class attribute of the first <li> element in the file.

{% if forloop.index == indexOfSpecificNavItem %} selected-nav-item {% endif %}

It should look like this:

<li class="{% if forloop.index == indexOfSpecificNavItem %} selected-nav-item {% endif %} mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">

Step three: In the header.liquid file, add the following code to the bottom of the schema.

{
     "type":      "header",
     "content":   "Change text color of specific nav item"
},
{
      "type": "checkbox",
      "id": "change_text_color_of_specific_nav_item",
      "default": true,
      "label": "Change text color of specific nav item"
},
{
     "type": "select",
     "id": "index_of_specific_nav_item",
     "options": [
        { "value": "1", "label": "First nav item"},
        { "value": "2", "label": "Second nav item"},
        { "value": "3", "label": "Third nav item"},
          { "value": "4", "label": "Fourth nav item"},
          { "value": "5", "label": "Fifth nav item"},
          { "value": "6", "label": "Sixth nav item"}  
     ],
     "label": "Specific nav item"
},
{
     "type": "color",
     "id": "text_color_of_specific_nav_item",
     "label": "Text color of specific nav item",
     "default": "#000000"
}

Step four: In the site-nav.liquid file, add the following code inside the class attribute of the first <li> element in the file.

{% if forloop.index == indexOfSpecificNavItem %} selected-nav-item {% endif %}

It should look like this:

 <li class="{% if forloop.index == indexOfSpecificNavItem %} selected-nav-item {% endif %} site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>

Step five: In the site-nav.liquid file, add the following code inside the class attribute of the very last <li> element in the file.

{% if forloop.index == indexOfSpecificNavItem %} selected-nav-item {% endif %}

It should look like this:

<li class="{% if forloop.index == indexOfSpecificNavItem %} selected-nav-item {% endif %} {% if link.active %} site-nav--active{% endif %}">