1

I'm trying to build on top of a Jekyll template to build a blog style site. I'm currently in the process of writing and styling the navigation, which is giving me a couple of problems. Using the answer to this question I've managed to add the class active on the current page, but here are the issues that still need ironing out:

  • First, all the 'tabs' are active when the page loads, not just the 'home' tab:

Project homepage screenshot

  • Second, the relevant 'tab' is no longer active when the url goes deeper than the first level of navigation. The url of the below screenshot is [baseurl]/reviews/[name-of-post], but the reviews 'tab' is not active:

enter image description here

I'm not sure how to approach the first problem, but for the second I think I will need to search the location.pathname for the relevant href, but I need to look further into this. Will update as necessary, but I've been playing around with this for ages with no luck so thought I'd post in the meantime.

Below are the code snippets for the relevant parts:

Side navigation HTML (written in Liquid)

<nav id="side-nav">
  <ul class="nav-items-list">
    <li id="nav-item"><a href="{{ site.baseurl }}/"><i class="fas fa-home"></i></a></li>
    {% for page in site.pages %}
    <li id="nav-item">
      <a href="{{ site.baseurl }}/{{ page.title | downcase }}/">
      <i class="{{ page.icon }}"></i>
      </a>
    </li>
    {% endfor %}
  </ul>
</nav>

Example page (YAML frontmatter)

---
layout: page
title: Reviews
permalink: /reviews/
icon: "fas fa-star-half-alt"
---

jQuery

$(function(){
  var current = location.pathname;
  $('#nav-item a').each(function(){
      var $this = $(this);
      if($this.attr('href').indexOf(current) !== -1){
          $this.addClass('active');
      }
  })
})

That should hopefully be enough, but if any more code is needed, please let me know. All the code is also available on GitHub, where the project is also hosted on GitHub Pages.

Thanks in advance.

Jamie

jbowman
  • 380
  • 3
  • 15

1 Answers1

1

The following should theoretically work:

// Compute the closest (2-part) base path from the current location
var basePath = '/' + window.location.pathname.split('/', 3).filter(Boolean).join('/') + '/';

// Add `active` class to the corresponding link if any
$('#nav-item a[href="' + basePath + '"]').addClass('active');

The first line basically takes the first 2 parts of the pathName, so:

  • if the URL is /glossd/, it yields /glossd/,
  • if the URL is /glossd/reviews/, it yields /glossd/reviews/,
  • if the URL is /glossd/reviews/something/, it still yields /glossd/reviews/.
Jeto
  • 14,596
  • 2
  • 32
  • 46
  • thank you so much for your quick response! i changed the split parameter to `2` instead of `3` and it does exactly what i want - thanks again! – jbowman Mar 24 '19 at 16:15
  • sorry – i've realised now that that was only because i was using a local dev environment. to work with gh-pages it does indeed need to be `3` and not `2`, as you first suggested. thanks! – jbowman Mar 24 '19 at 16:23