Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

header.html
<!-- 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"/>
        </svg>
      </a>

      <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 %}
      </div>
    </nav>

  </div>

</header>
_layout.scss
.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!!