Fixed incorrectly displayed nested lists

material/base.html

@@ -32,9 +32,9 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-45f91e8d31.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-4ebe3f1d68.css">
       {% if config.extra.palette %}
-        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-49c4a440b6.palette.css">
+        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-f6789307ff.palette.css">
       {% endif %}
     {% endblock %}
     {% block fonts %}

material/partials/nav-item.html

@@ -1,5 +1,9 @@
+{% set class = "md-nav__item" %}
+{% if nav_item.active %}
+  {% set class = "md-nav__item md-nav__item--active" %}
+{% endif %}
 {% if nav_item.children %}
-  <li class="md-nav__item md-nav__item--nested">
+  <li class="{{ class }} md-nav__item--nested">
     {% if nav_item.active %}
       <input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" checked>
     {% else %}
@@ -23,7 +27,7 @@
     </nav>
   </li>
 {% elif nav_item == page %}
-  <li class="md-nav__item">
+  <li class="{{ class }}">
     {% set toc_ = page.toc %}
     <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="toc">
     {% if toc_ | first is defined %}
@@ -42,15 +46,9 @@
     {% endif %}
   </li>
 {% else %}
-  <li class="md-nav__item">
-    {% if nav_item.active %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
-        {{ nav_item.title }}
-      </a>
-    {% else %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link">
-        {{ nav_item.title }}
-      </a>
-    {% endif %}
+  <li class="{{ class }}">
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link">
+      {{ nav_item.title }}
+    </a>
   </li>
 {% endif %}

mkdocs.yml

@@ -36,6 +36,8 @@ theme_dir: material
 
 # Options
 extra:
+  feature:
+    tabs: true
   palette:
     primary: indigo
     accent: indigo

src/assets/stylesheets/application.palette.scss

@@ -103,10 +103,19 @@ button[data-md-color-accent] {
       background-color: $color;
     }
 
-    // Current or hovered link
-    .md-nav__link:active,
-    .md-nav__link--active {
-      color: $color;
+    // Link inside item
+    .md-nav__link {
+
+      // Current or hovered link
+      &:active,
+      .md-nav__item--active > & {
+        color: $color;
+      }
+
+      // Reset active color for nested list titles
+      .md-nav__item--nested > & {
+        color: inherit;
+      }
     }
 
     // [tablet portrait -]: Layered navigation

src/assets/stylesheets/layout/_nav.scss

@@ -137,10 +137,15 @@
 
     // Active link
     &:active,
-    &--active {
+    .md-nav__item--active > & {
       color: $md-color-primary;
     }
 
+    // Reset active color for nested list titles
+    .md-nav__item--nested > & {
+      color: inherit;
+    }
+
     // Focused or hovered link
     &:focus,
     &:hover {

src/assets/stylesheets/layout/_tabs.scss

@@ -119,8 +119,9 @@
         & > .md-nav__list > .md-nav__item {
           font-size: 0;
 
-          // Show 1st level nested items and induce margin collapse
+          // Reset font-size for nested items and induce margin collapse
           &--nested {
+            display: none;
             font-size: 1.4rem;
             overflow: auto;
 
@@ -136,6 +137,11 @@
               }
             }
           }
+
+          // Show 1st level active nested items
+          &--active {
+            display: block;
+          }
         }
       }
 

src/partials/nav-item.html

@@ -20,9 +20,15 @@
   IN THE SOFTWARE.
 -->
 
+<!-- Determine class according to level -->
+{% set class = "md-nav__item" %}
+{% if nav_item.active %}
+  {% set class = "md-nav__item md-nav__item--active" %}
+{% endif %}
+
 <!-- Main navigation item with nested items -->
 {% if nav_item.children %}
-  <li class="md-nav__item md-nav__item--nested">
+  <li class="{{ class }} md-nav__item--nested">
 
     <!-- Active checkbox expands items contained within nested section -->
     {% if nav_item.active %}
@@ -57,7 +63,7 @@
 
 <!-- Currently active page -->
 {% elif nav_item == page %}
-  <li class="md-nav__item">
+  <li class="{{ class }}">
     {% set toc_ = page.toc %}
 
     <!-- Active checkbox expands items contained within nested section -->
@@ -88,17 +94,10 @@
 
 <!-- Main navigation item -->
 {% else %}
-  <li class="md-nav__item">
-    {% if nav_item.active %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
-          class="md-nav__link md-nav__link--active">
-        {{ nav_item.title }}
-      </a>
-    {% else %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
-          class="md-nav__link">
-        {{ nav_item.title }}
-      </a>
-    {% endif %}
+  <li class="{{ class }}">
+    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+        class="md-nav__link">
+      {{ nav_item.title }}
+    </a>
   </li>
 {% endif %}