Skip to main content

Changing a single top nav item background color

I'm trying to figure out how to change the background color of a single li in the top nav. Has anyone accomplished this? I'm thinking something along the lines of "if child..." refers to "donate" slug then... and specify a new class which I can style in css. Would be super useful for the side nav as well.

Any help is greatly appreciated!

Official response from

Amy, there are a couple of ways to do this.

The easiest way would be to first make the nav item you want to change the last (or first) item in the navigation bar,  then it is easy to target it with some liquid markup in the _nav.html file, located under Websites > Theme > _nav.html.

In my example below, I am choosing to target the last item in the nav by using the {% if forloop.last %} tag and replacing this:

--------

<li class="{% if child.is_or_is_ancestor_of_current_page? %}active{% if forloop.first %}_left{% endif %}{% else %}nodrop{% endif %}">
<a href="{{ child.url }}">{{ child.name }}</a>
</li>
{% else %}
<li class="{% if child.is_or_is_ancestor_of_current_page? %}active_drop{% if forloop.first %}_left{% endif %}{% else %}drop{% endif %}">
<a href="{{ child.url }}">{{ child.name }}</a>


-------->With this:

<li class="{% if child.is_or_is_ancestor_of_current_page? %}active{% if forloop.first %}_left{% endif %}{% else %}nodrop{% endif %}{% if forloop.last %}_right{% endif %}">
<a href="{{ child.url }}">{{ child.name }}</a>
</li>
{% else %}
<li class="{% if child.is_or_is_ancestor_of_current_page? %}active_drop{% if forloop.first %}_left{% endif %}{% else %}drop{% endif %}{% if forloop.last %}_right{% endif %}">
<a href="{{ child.url }}">{{ child.name }}</a>

 

This creates a couple of new li styles that you can set in your theme.scss file. For example: 

.nodrop_right { background-color: black;}
.drop_right { background-color: black;}
.active_right { background-color: black;}

 


You can also use a conditional statement like this:

{% if child.slug == 'donate' %}<li class="active_donate">{% else %}<li class="donate_inactive">{% endif %}

"active_donate" and "donate_inactive" would be styles you would edit in your theme.scss file. This is similar to this method for adding an icon to the navigation bar


There are a few other ways of doing it, like you mentioned below in the comments. Richir Outreach has a few methods outlined here as well.

Thanks.

Share this post

Showing 8 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.