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

Elena Paraschiv
Elena Paraschiv
9,938 Points

Identify the error between my code and teachers code

I cannot seem to identify the error between my code and the previous code. THis is how it looks like for me(1) and this is how it is supposed to look like(2)

1-Imgur 2- Imgur

This is my code:

<!-- Capture the link in the bar -->
{% capture location %}{{ page.url | split:'/' }}{% endcapture %}
<header class="main-header" role="banner">
  <div class="grid">
    <div class="grid__col--12">
      <a class="site-logo" href="/" title="Webconfs.me – Home">
        WebConfs
      </a>
      <nav class="navbar" role="navigation">
        <ul class="nav">
        {% for page in site.pages %}
          <!-- Assign the variable with title -->
          {% assign current = page.title | downcase %}
          {% 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 %}
                    {% endfor %}
        </ul>
      </nav>
    </div>
  </div>
</header>

This is teacher's code:

<!-- Capture and store a URL -->
{% capture location %}{{ page.url | split:'/' }}{% endcapture %} 
<header class="main-header" role="banner">
  <div class="grid">
    <div class="grid__col--12">
      <a class="site-logo" href="/" title="Webconfs.me – Home">
        WebConfs
      </a>
      <nav class="navbar" role="navigation">
        <ul class="nav">
        {% for page in site.pages %}
          <!-- Compare the page title to the URL -->
          {% assign current = page.title | downcase %}

          {% 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 %}

        {% endfor %}
        </ul>
      </nav>
    </div>
  </div>
</header>

1 Answer

Jeff Lemay
Jeff Lemay
14,262 Points

nav_item--current and nav__item--current

(double underscore used)

EDIT: the underscores are going away when I post... there should be two underscores after nav, your's only has one. EDIT2: fixed

Elena Paraschiv
Elena Paraschiv
9,938 Points

Good eyes Jeff! Thanks a lot!