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!
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.
Showing 8 reactions
Sign in with
Help :)
Paul
Check by cStreet - Mobile event check-in for organizers
Certified Architect
Certified Developer
In nav.html add "topnav{{child.name}}" as a class to the relevant li. In my case:
<li class=“nodrop topnav_{{child.name}}”>
Then you’ll be able to style each nav item separately with css:
.topnav_Donate {
background-color: #FFFF00;}
Careful because I got tripped up on it being case sensitive.
Check by cStreet - Mobile event check-in for organizers
Certified Architect
Certified Developer
Certified Architect
Certified Developer
Check by cStreet - Mobile event check-in for organizers
Certified Architect
Certified Developer
Certified Architect
Certified Developer
<a href=“”http://www.richiroutreach.com/nationbuilder-theme-guide/style-individual-top-nav-items">http://www.richiroutreach.com/nationbuilder-theme-guide/style-individual-top-nav-items" title=“Custom NationBuilder Navigation”>http://www.richiroutreach.com/nationbuilder-theme-guide/style-individual-top-nav-items</a>
Certified Architect
Certified Developer