diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index 1f44e91a8a..5dbecf8aa4 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -277,7 +277,7 @@ export class AppComponent implements OnInit {
       this.tocMaxHeightOffset =
           el.querySelector('footer').clientHeight +
           el.querySelector('md-toolbar.app-toolbar').clientHeight +
-          44; //  margin
+          24; //  fudge margin
     }
 
     this.tocMaxHeight = (document.body.scrollHeight - window.pageYOffset - this.tocMaxHeightOffset).toFixed(2);
diff --git a/aio/src/app/layout/nav-item/nav-item.component.html b/aio/src/app/layout/nav-item/nav-item.component.html
index aae67c7a80..799feab04f 100644
--- a/aio/src/app/layout/nav-item/nav-item.component.html
+++ b/aio/src/app/layout/nav-item/nav-item.component.html
@@ -21,6 +21,7 @@
 
   <div class="heading-children" [ngClass]="classes">
     <aio-nav-item *ngFor="let node of nodeChildren" [level]="level + 1" [isWide]="isWide"
+    [isParentExpanded]="isExpanded"
     [node]="node" [selectedNodes]="selectedNodes"></aio-nav-item>
   </div>
 </div>
diff --git a/aio/src/app/layout/nav-item/nav-item.component.ts b/aio/src/app/layout/nav-item/nav-item.component.ts
index 80deac472c..a62612f834 100644
--- a/aio/src/app/layout/nav-item/nav-item.component.ts
+++ b/aio/src/app/layout/nav-item/nav-item.component.ts
@@ -9,6 +9,7 @@ export class NavItemComponent implements OnChanges {
   @Input() isWide = false;
   @Input() level = 1;
   @Input() node: NavigationNode;
+  @Input() isParentExpanded = true;
   @Input() selectedNodes: NavigationNode[];
 
   isExpanded = false;
@@ -22,9 +23,10 @@ export class NavItemComponent implements OnChanges {
     if (this.selectedNodes) {
       const ix = this.selectedNodes.indexOf(this.node);
       this.isSelected = ix !== -1; // this node is the selected node or its ancestor
-      this.isExpanded = this.isSelected || // expand if selected or ...
+      this.isExpanded = this.isParentExpanded &&
+        (this.isSelected || // expand if selected or ...
         // preserve expanded state when display is wide; collapse in mobile.
-        (this.isWide && this.isExpanded);
+        (this.isWide && this.isExpanded));
     } else {
       this.isSelected = false;
     }
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 880b27f0ae..cc0445e9f6 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -22,7 +22,7 @@ aio-nav-menu {
   }
 
   aio-nav-item div a {
-    padding-left: 16px;
+    padding-left: 6px;
   }
 }
 
@@ -67,27 +67,26 @@ md-sidenav-container div.mat-sidenav-content {
   overflow-wrap: break-word;
   padding-top: 4px;
   padding-bottom: 4px;
-  padding-left: 16px;
   text-decoration: none;
   text-align: left;
-  transition-duration: 180ms;
-  transition-property: background-color, color;
-  transition-timing-function: ease-in-out;
-  width: 100%;
+  width: 93%;
   word-wrap: break-word;
-  outline: none;
-  transition: all 0.3s ease-in-out;
 
   &:hover {
-    text-shadow: 0 0 5px #ffffff;
+    background-color: $lightgray;
     color: $blue;
+    text-shadow: 0 0 5px #ffffff;
+  }
+
+  &:focus {
+    outline: $accentblue auto 2px;
   }
 
   //icons _within_ nav
   .mat-icon {
     position: absolute;
     top: 0;
-    right: 8px;
+    right: 0;
     margin: 4px;
   }
 }
@@ -99,11 +98,10 @@ md-sidenav-container div.mat-sidenav-content {
 button.vertical-menu-item {
   border: none;
   background-color: transparent;
-  padding: 8px 0 8px 20px;
-
-  &:focus {
-    color: $black;
-  }
+  margin-right: 0;
+  padding-left: 6px;
+  padding-top: 8px;
+  padding-bottom: 10px;
 }
 
 .heading {
@@ -111,7 +109,6 @@ button.vertical-menu-item {
   cursor: pointer;
   position: relative;
   text-transform: uppercase;
-  width: 100%;
 }
 
 .heading-children.expanded {
@@ -136,25 +133,25 @@ button.vertical-menu-item {
   font-family: $main-font;
   font-size: 14px;
   font-weight: 400;
-  padding-left: 20px;
+  margin-left: 14px;
   transition: background-color 0.2s;
   text-transform: uppercase;
 }
 
 .level-2 {
+  color: $mediumgray;
   font-family: $main-font;
   font-size: 14px;
-  color: $mediumgray;
   font-weight: 400;
-  padding-left: 20px;
+  margin-left: 12px;
   text-transform: none;
 }
 
 .level-3 {
+  color: $mediumgray;
   font-family: $main-font;
   font-size: 14px;
-  color: $mediumgray;
-  padding-left: 8px;
+  margin-left: 10px;
 }
 
 .level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
@@ -163,7 +160,7 @@ button.vertical-menu-item {
 
 .level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
   @include rotate(0deg);
-  margin: 4px;
+ // margin: 4px;
 }
 
 .promo-img-container img {
diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss
index 8495984d4f..c4a2f08b78 100644
--- a/aio/src/styles/2-modules/_toc.scss
+++ b/aio/src/styles/2-modules/_toc.scss
@@ -1,9 +1,9 @@
 .toc-container {
   width: 18%;
   position: fixed;
-  top: 96px;
+  top: 76px;
   right: 0;
-  bottom: 32px;
+  bottom: 12px;
   overflow-y: auto;
   overflow-x: hidden;
 }