diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
index 47b10033..bf525e7f 100644
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
@@ -17,6 +17,8 @@ site:
         url: /index.html
         navigation:
         - content: Introduction
+          url: /index.html
+          urlType: fragment
           items:
           - content: Why Couchbase?
             url: '#'
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
index e206b7ff..c1acb3ee 100644
--- a/src/js/01-nav.js
+++ b/src/js/01-nav.js
@@ -150,8 +150,36 @@
       var topPositon = currentPageMenu.offsetTop
       var leftMenu = document.querySelector('.left-sidebar-menu .nav-menu')
       leftMenu.scrollTop = topPositon
-    }
-  }, 200)
 
+      // show depth 0 child element
+
+      var otherNavs = document.querySelectorAll('.nav-list > .nav-item[data-depth="0"]')
+      otherNavs.forEach(function (nav) {
+        var navSubMenu = Array.from(nav.querySelector('ul.nav-list').children)
+        // var navDataDepth = Array.from(nav.querySelector('ul.nav-list'))
+        navSubMenu.forEach(function (item) {
+          item.classList.remove('is-inactive')
+        })
+
+        // hide main menu for top level navigation -
+
+        if (nav.className.includes('is-current-page')) {
+          navMenuControl.style.display = 'none'
+        }
+
+        // hide in second level menu
+        if (nav.className.includes('is-current-path')) {
+          otherNavs.forEach(function (navItem) {
+            if (!navItem.className.includes('is-current-path')) {
+              navItem.classList.add('is-inactive')
+            }
+          })
+        }
+      })
+      // if(otherNavs) {
+
+      // }
+    }
+  }, 100)
   // clearTimeout(scrollCurrentPageMenu, 20000)
 })()
diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs
index b5d08573..4a4370ae 100644
--- a/src/partials/nav-tree.hbs
+++ b/src/partials/nav-tree.hbs
@@ -1,8 +1,8 @@
 {{#if navigation}}
 {{#each navigation}}
 {{#if (eq ../crumbAtLevel this)}}
-{{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2)}}
-<div class="main-nav-parent new">
+{{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2 or eq ../crumbLevel 3)}}
+<div class="main-nav-parent new " data-depth="{{../level}}">
 <span class="back-to-menu"><i class="fas fa-chevron-left"></i> Main Menu </span>
 {{!-- <span class="nav-text">{{{./content}}}</span> --}}
 </div>
@@ -14,7 +14,7 @@
 {{#each navigation}}
 <li class="nav-item{{#if (eq ../crumbAtLevel this)}}
 {{~#if (eq this (last @root.page.breadcrumbs))}} is-current-page{{~else}} is-current-path{{/if}} is-active
-{{~else if (eq ../level 0)}} {{!--is-active--}} is-inactive{{/if}}{{#if (eq ../crumbAtLevel this (and eq ../level 2))}} is-active-depth-2 {{/if}} " data-depth="{{../level}}">
+{{~else if (eq ../level 1)}} {{!--is-active--}} is-inactive{{/if}}{{#if (eq ../crumbAtLevel this (and eq ../level 2))}} is-active-depth-2 {{/if}} " data-depth="{{../level}}">
 
 {{#if ./content}}
 <span class="nav-line "  data-depth="{{../level}}">