diff --git a/app/assets/javascripts/discourse/components/d-navigation.js.es6 b/app/assets/javascripts/discourse/components/d-navigation.js.es6
index b68ceeb739f..faf79ff5fcd 100644
--- a/app/assets/javascripts/discourse/components/d-navigation.js.es6
+++ b/app/assets/javascripts/discourse/components/d-navigation.js.es6
@@ -29,9 +29,13 @@ export default Component.extend({
 
   @discourseComputed("filterMode", "category", "noSubcategories")
   navItems(filterMode, category, noSubcategories) {
-    // we don't want to show the period in the navigation bar since it's in a dropdown
-    if (filterMode.indexOf("top/") === 0) {
-      filterMode = "top";
+    const filterModeParts = filterMode.split("/");
+    if (
+      filterModeParts.length >= 2 &&
+      filterModeParts[filterModeParts.length - 2] === "top"
+    ) {
+      filterModeParts.pop();
+      filterMode = filterModeParts.join("/");
     }
 
     let params;
diff --git a/app/assets/javascripts/discourse/components/navigation-bar.js.es6 b/app/assets/javascripts/discourse/components/navigation-bar.js.es6
index 6f262ce05c4..a533ba95def 100644
--- a/app/assets/javascripts/discourse/components/navigation-bar.js.es6
+++ b/app/assets/javascripts/discourse/components/navigation-bar.js.es6
@@ -19,9 +19,15 @@ export default Component.extend({
 
   @discourseComputed("filterMode", "navItems")
   selectedNavItem(filterMode, navItems) {
-    if (filterMode.indexOf("top/") === 0) {
-      filterMode = "top";
+    const filterModeParts = filterMode.split("/");
+    if (
+      filterModeParts.length >= 2 &&
+      filterModeParts[filterModeParts.length - 2] === "top"
+    ) {
+      filterModeParts.pop();
+      filterMode = filterModeParts.join("/");
     }
+
     let item = navItems.find(i => i.active === true);
 
     item =