Highlighting the Active Parent in Multi-Level Navigation Header with Jekyll and Bootstrap

Question

My website uses both Jekyll and Bootstrap, and the main navigation header is a dropdown. I would like the parent item (e.g., Solutions) to be highlighted in the header whenever the user is on a corresponding child page (e.g., Solutions > Solution 1).

My Jekyll navigation file (navigation.yml) is in the following format:

- title: Solutions
  url: /solutions
  subpages:
    - title: Solution 1
      url: /solutions/1
    - title: Solution 2
      url: /solutions/2
    - title: Solution 3
      url: /solutions/3

- title: Products
  url: /products
  subpages:
    - title: Product A
      url: /products/a
    - title: Product B
      url: /products/b
    - title: Product C
      url: /products/c

And my navigation HTML file (top-navbar.html) looks like this:

<header class="navbar " role="navigation" style="margin-bottom: 0">
    <div class="container main-header">
        <div class="navbar-header">
            <button class="navbar-toggle bar-button" type="button" data-toggle="collapse" data-target=".site-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/">
                <img src="/static/img/logo.png">
            </a>
        </div>        
        <div class="collapse collapse-inverse navbar-collapse site-navbar-collapse">
            <ul class="nav navbar-nav navbar-right site-nav">
                {% for section in site.data.navigation %}
                <li class="dropdown " >
                    <a href="{{ section.url }}">{{ section.title }}</a>
                    {% if section.subpages %}
                    <ul class="dropdown-menu " >
                        {% for page in section.subpages %}
                        <li ><a href="{{ page.url }}">{{ page.title }}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </li>
                {% endfor %}                
            </ul>        
        </div>
    </div>
</header>

And the CSS for the site-nav class looks like this:

.site-nav:last-child{margin-right:15px;}
.site-nav>li>a{padding:10px 17px;color:#545454;}
.site-nav>li>a.selected{background-color:#acacac;color:#f9f9f9;}
.site-nav>li>a.current{background-color:#acacac;color:#f9f9f9;}

Is there a clean way to add highlighting to the navigation header for the parent of the active page?

David Jacquel David Jacquel · Accepted Answer · 2015-04-22T00:21:32

Set an active class on current page link in the menu. Replace :

{% for page in section.subpages %}
  <li ><a href="{{ page.url }}">{{ page.title }}</a></li>
{% endfor %}

by

{% for p in section.subpages %}
  <li{% if p.url == page.url %} class="active"{% endif %}>
    <a href="{{ site.baseurl }}{{ p.url }}">{{ p.title }}</a>
  </li>
{% endfor %}

Note that I don't do {% for page in section.subpages %} because page is an already existing variable holding current page datas.

As we cannot select active link parent with pure CSS, we use some jquery. Place this at the bottom of your page, just before the closing body tag.

<script>$("li.active").parents('li').toggleClass("active");</script>

Highlighting the Active Parent in Multi-Level Navigation Header with Jekyll and Bootstrap

1 Answers