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

Jekyll capture not working?

So I finally broke down and figured I'd check out Jekyll, I am running version 3.0.1 I decided not to use the project files but "translate" how Guil Hernandez does his work to a dummy project. At first I thought maybe I was not using proper Sass but upon inspecting elements in the DOM I have noticed that the anchor tag for navigation isn't even getting assigned the "page-link-current" class. Maybe I just have a typo, I just cut myself down to one cup of coffee a day recently so its totally possible

<!-- Capture and store URL -->
{% capture location %} {{ page.url | split:'/' }} {% endcapture %}

<header class="site-header">

  <div class="wrapper">

    <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>

    <nav class="site-nav">
      <a href="#" class="menu-icon">
        <svg viewBox="0 0 18 15">
          <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
          <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
          <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>

      <div class="trigger">
        {% for page in site.pages %}
        <!-- compare page title to url -->
          {% assign current = page.title | downcase %}
          {% if page.title %}
           <a {% if location == current %} class="page-link-current" 
              {% else %} class="page-link" 
              {% endif %} href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
          {% endif %}
        {% endfor %}


.page-link {
            display: block;
            padding: 5px 10px;

            &:not(:last-child) {
                margin-right: 0;
            &-current {
                color: steelblue;
                font-weight: bold;
            margin-left: 20px;

Mine doesn't work either. I was concerned that it was because my page titles are multiple words so it might not be accounting for the space? I don't know liquid at all so this is tricky.

Meanwhile, there's this approach which is completely different: http://stackoverflow.com/questions/8340170/jekyll-automatically-highlight-current-tab-in-menu-bar

I already added a line for class: to my YAML for each page so that I could assign the class to the body tag as <body class="{{ page.class }}">. I could just use that variable to compare instead. There may be a cleaner way to do this though.

1 Answer

Hey John,

I had the same issue and I was banging my head trying to figure it out...but what I found is in your capture logic at the top you can't have any spaces between closing and opening curly brackets.

so this:

        {% capture location %} {{ page.url | split:'/' }} {% endcapture %}   

should be:

        {% capture location %}{{ page.url | split:'/' }}{% endcapture %}   
Fernando Gomez
Fernando Gomez
18,527 Points

this worked for me.....thank you William!!