Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Build a Blog with Jekyll and GitHub Pages Building and Customizing the Blog Dynamic Navigation

which Version of the demo do you work from in the download as I cannot find nav__item class

which Version of the demo do you work from in the download as I cannot find nav__item class

1 Answer

Sean Henderson
Sean Henderson
15,413 Points

There are 9 videos total in this section, and folders v1-v9 in the project files download. "Dynamic Navigation" is the 6th video, so to follow along you need to use the v6/ folder inside of the project files.

Inside of v6/ there are 2 folders:

  • v6/webconfs - this is the code to start from in the beginning of the video
  • v6/webconfs_final - this is what the code should look like after following the video

After Guil finishes, the nav__item in _includes/header.html class changes a bit.

Before (in webconfs/):

{% if page.title %}
<li class="nav__item">
    <a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
</li>
{% endif %}

After (in webconfs_final/):

{% if page.title %}
<li {% if location == current %} class="nav__item--current" {% else %} class="nav__item" {% endif %}>
    <a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
</li>
{% endif %}

So the li with nav__item class is still there, but in the final version there is additional logic that decides if it should be nav__item or nav__item--current based which page is currently being viewed.

The class is "page-link" in the current version.