markdown 商家可以更改特定导航项的文本颜色

Posted 2021-05-05

**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
![](https://screenshot.click/2019-08-12_15-26-44.jpg)

# What you want
![](https://screenshot.click/2019-08-12_15-29-42.jpg)
![screenshot](https://screenshot.click/2019-08-15_16-43-52.jpg)
----

**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 %}">

```