Jekyll - Automatically highlight current tab in menu bar

Question

I am using github to host a static site and Jekyll to generate it.

I have a menu bar (as

) and would like the
• correspo

Answer 1

The navigation of your website should be an unordered list. To get the list items to lighten up when they are active, the following liquid script adds an 'active' class to them. This class should be styled with CSS. To detect which link is active, the script uses ‘contains’, as you can see in the code below.

  

    Getting started
  
  ...
  ...
  ...

This code is compatible with all permalink styles in Jekyll. The ‘contains’ statement succesfully highlights the first menu item at the following URL’s:

• getting-started/
• getting-started.html
• getting-started/index.html
• getting-started/subpage/
• getting-started/subpage.html

Source: http://jekyllcodex.org/without-plugin/simple-menu/