Fix highlighting top level links

babel · Apr 5, 2017 · 161cd26 · 161cd26
1 parent 5a47522
commit 161cd26
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -19,8 +19,20 @@
     <nav id="babel-navbar" class="collapse navbar-collapse babel-navbar">
       <ul class="nav navbar-nav">
         {% for item in site.data.navigation %}
+          {% if item.url %}
+            {% assign active_part = item.url %}
+          {% else %}
+            {% assign active_part = item.title | downcase %}
+          {% endif %}
+
+          {% if page.url contains active_part %}
+            {% assign top_active_class = "active" %}
+          {% else %}
+            {% assign top_active_class = "" %}
+          {% endif %}
+
           {% if item.subnav %}
-            <li class="dropdown {% if page.url contains item.url %}active{% endif %}">
+            <li class="dropdown {{ top_active_class }}">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ item.title }} <span class="caret"></span></a>
               <ul class="dropdown-menu" role="menu">
                 {% for group in item.subnav %}
@@ -30,8 +42,7 @@
                   {% endif %}
 
                   {% for item in group.items %}
-
-                    <li {% if page.url contains item.url %}class="active"{% endif %}>
+                    <li class="{% if page.url == item.url %}active{% endif %}">
                       <a href="{{ item.url | prepend: site.baseurl }}">{{ item.title }}</a>
                     </li>
                   {% endfor %}
@@ -40,7 +51,7 @@
               </ul>
             </li>
           {% else %}
-            <li {% if page.url contains item.url %}class="active"{% endif %}>
+            <li class="{{ top_active_class }}">
               <a href="{{ item.url | prepend: site.baseurl }}">{{ item.title }}</a>
             </li>
           {% endif %}