diff --git a/assets/scss/components/stencil/navPages/_navPages.scss b/assets/scss/components/stencil/navPages/_navPages.scss
index 107e90653f..c189f84b55 100644
--- a/assets/scss/components/stencil/navPages/_navPages.scss
+++ b/assets/scss/components/stencil/navPages/_navPages.scss
@@ -209,7 +209,7 @@
         }
     }
 
-    &:hover {
+    &:hover, &.activePage {
         color: stencilColor("navPages-color-hover");
 
         // scss-lint:disable NestingDepth
diff --git a/templates/components/common/navigation-dropdown.html b/templates/components/common/navigation-dropdown.html
index 340ca19f6a..8a2d86569a 100644
--- a/templates/components/common/navigation-dropdown.html
+++ b/templates/components/common/navigation-dropdown.html
@@ -6,12 +6,12 @@
         {{#each children}}
             <li class="navPage-subMenu-item-child">
                 {{#if children}}
-                    <a class="navPage-subMenu-action navPages-action navPages-action-depth-max has-subMenu" href="{{url}}" data-collapsible="navPages-{{id}}">
+                    <a class="navPage-subMenu-action navPages-action navPages-action-depth-max has-subMenu{{#if is_active}} activePage{{/if}}" href="{{url}}" data-collapsible="navPages-{{id}}">
                         {{name}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
                     </a>
                     {{> components/common/navigation-dropdown}}
                 {{else}}
-                    <a class="navPage-subMenu-action navPages-action" href="{{url}}">{{name}}</a>
+                    <a class="navPage-subMenu-action navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
                 {{/if}}
             </li>
         {{/each}}
diff --git a/templates/components/common/navigation-list-alternate.html b/templates/components/common/navigation-list-alternate.html
index 1aa65604f5..1c0f8d2f7a 100644
--- a/templates/components/common/navigation-list-alternate.html
+++ b/templates/components/common/navigation-list-alternate.html
@@ -1,8 +1,8 @@
 {{#if children}}
-    <a class="navPages-action navPages-action-depth-max has-subMenu is-root" href="{{url}}" data-collapsible="navPages-{{id}}">
+    <a class="navPages-action navPages-action-depth-max has-subMenu is-root{{#if is_active}} activePage{{/if}}" href="{{url}}" data-collapsible="navPages-{{id}}">
         {{name}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
     </a>
     {{> components/common/navigation-dropdown}}
 {{else}}
-    <a class="navPages-action" href="{{url}}">{{name}}</a>
+    <a class="navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
 {{/if}}
diff --git a/templates/components/common/navigation-list.html b/templates/components/common/navigation-list.html
index 5e6e498976..7a96c9086d 100644
--- a/templates/components/common/navigation-list.html
+++ b/templates/components/common/navigation-list.html
@@ -1,5 +1,5 @@
 {{#if children}}
-<a class="navPages-action has-subMenu" href="{{url}}" data-collapsible="navPages-{{id}}">
+<a class="navPages-action has-subMenu{{#if is_active}} activePage{{/if}}" href="{{url}}" data-collapsible="navPages-{{id}}">
     {{name}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
 </a>
 <div class="navPage-subMenu" id="navPages-{{id}}" aria-hidden="true" tabindex="-1">
@@ -11,7 +11,7 @@
             <li class="navPage-subMenu-item">
                 {{#if children}}
                     <a
-                        class="navPage-subMenu-action navPages-action has-subMenu"
+                        class="navPage-subMenu-action navPages-action has-subMenu{{#if is_active}} activePage{{/if}}"
                         href="{{url}}"
                         data-collapsible="navPages-{{id}}"
                         data-collapsible-disabled-breakpoint="medium"
@@ -22,17 +22,17 @@
                     <ul class="navPage-childList" id="navPages-{{id}}">
                         {{#each children}}
                         <li class="navPage-childList-item">
-                            <a class="navPage-childList-action navPages-action" href="{{url}}">{{name}}</a>
+                            <a class="navPage-childList-action navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
                         </li>
                         {{/each}}
                     </ul>
                 {{else}}
-                    <a class="navPage-subMenu-action navPages-action" href="{{url}}">{{name}}</a>
+                    <a class="navPage-subMenu-action navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
                 {{/if}}
             </li>
         {{/each}}
     </ul>
 </div>
 {{else}}
-<a class="navPages-action" href="{{url}}">{{name}}</a>
+<a class="navPages-action{{#if is_active}} activePage{{/if}}" href="{{url}}">{{name}}</a>
 {{/if}}
diff --git a/templates/components/common/navigation-menu.html b/templates/components/common/navigation-menu.html
index b406afa954..c5a0d8227d 100644
--- a/templates/components/common/navigation-menu.html
+++ b/templates/components/common/navigation-menu.html
@@ -16,7 +16,7 @@
         {{#unless theme_settings.hide_content_navigation}}
             {{#each pages}}
                  <li class="navPages-item navPages-item-page">
-                     <a class="navPages-action" href="{{url}}">{{name}}</a>
+                     <a class="navPages-action{{#if name '==' ../page.title}} activePage{{/if}}" href="{{url}}">{{name}}</a>
                  </li>
              {{/each}}
         {{/unless}}