From 7a360e3e14425a88340c4aef05f592ceefdd7a96 Mon Sep 17 00:00:00 2001
From: Christopher Moroney <christopher.moroney1@gmail.com>
Date: Fri, 17 Jul 2026 09:54:33 -0700
Subject: [PATCH 1/3] header and footer nav update

---
 assets/css/cross-page.css                     | 22 +++++--------------
 .../layouts/partials/footer/footer.html       |  2 +-
 .../layouts/partials/head/head.html           |  9 ++++++--
 .../layouts/partials/header/nav-masthead.html | 22 ++++++++++++++++---
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/assets/css/cross-page.css b/assets/css/cross-page.css
index bd2230f2d3..4fb0f740a3 100644
--- a/assets/css/cross-page.css
+++ b/assets/css/cross-page.css
@@ -175,12 +175,7 @@ table tbody td {
 /* CLS fix: reserve space for nav before hydration */
 arm-top-navigation:not(:defined) {
     display: block;
-    min-height: 80px;
-}
-@media (max-width: 1024px) {
-    arm-top-navigation:not(:defined) {
-        min-height: 60px;
-    }
+    min-height: 60px;
 }
 
 /* Fix global nav height */
@@ -189,23 +184,18 @@ arm-top-navigation:not(:defined) {
 /*************************************/
 #global-nav-height-fixer {
     max-width: 100vw;
-    height: 80px;
+    height: 60px;
     overflow: hidden;
     position: relative;
     top: 0;
 }
-@media (max-width: 1024px) { /* smaller screens than LG */
-        #global-nav-height-fixer {
-            height: 60px;
-        }
-}
 .nav-transparent {
-    background: transparent;
-    background-color: transparent;
+    background: var(--ads-ui-ink-100);
+    background-color: var(--ads-ui-ink-100);
 }
 .nav-black {
-    background: #010101;
-    background-color: #010101;  
+    background: var(--ads-ui-ink-100);
+    background-color: var(--ads-ui-ink-100);
 }
 
 /* Fix Masthead Height */
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/footer/footer.html b/themes/arm-design-system-hugo-theme/layouts/partials/footer/footer.html
index 73e72fa1ea..30a8516042 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/footer/footer.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/footer/footer.html
@@ -9,5 +9,5 @@
 */}}
 
 <div id="arm-footer">
-  <arm-footer-navigation></arm-footer-navigation>
+  <arm-footer-navigation lang="en" theme="dark"></arm-footer-navigation>
 </div>
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html b/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html
index 8ad73fbd6a..2c93252da8 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html
@@ -55,8 +55,13 @@
   integrity="sha384-caAG7P/HrHxcdQa2gTEfvZYGPLQk7yRwVdvtRn6sa3TRKzcAyY1LMvObXKGhwFNb"
   crossorigin="anonymous">
 </script>
-    <!-- Arm Header & Footer loading -->
-<script  type="text/javascript"  src="https://www.arm.com/arm-global-web-components/devhub/app.js" ></script>
+    <!-- Arm Header & Footer loading.
+         TODO: Replace the test bundle with its production URL when Arm publishes it. -->
+<script
+  type="text/javascript"
+  src="https://www.arm.com/arm-global-web-components/devhub/test.js"
+  defer>
+</script>
 
 
     
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html
index b820866c71..a228e7c963 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html
@@ -7,8 +7,16 @@
   
   <!-- No masthead on homepage, as that has a special gradient look/feel -->
   {{ if .IsHome }}
-     <div id="global-nav-height-fixer" class="nav-black">
-        <arm-top-navigation observe="#breadcrumb-element"></arm-top-navigation> <!-- to set to all black all the time: observe="head" -->
+    <div id="global-nav-height-fixer" class="nav-black">
+        <arm-top-navigation
+          observe="#breadcrumb-element"
+          desktopbreakpoint="1200"
+          theme="dark"
+          hostname="learn.arm.com"
+          enable-ui-route="true"
+          lang="en"
+          disabled-subnav-animation>
+        </arm-top-navigation> <!-- to set to all black all the time: observe="head" -->
     </div>
     <div id="only-breadcrumb-masthead">
         <div class="is-responsive-width">
@@ -20,7 +28,15 @@
     <div id="nav-masthead-breadcrumbs">
         <!-- Global Nav -->
         <div id="global-nav-height-fixer" class="nav-transparent">
-            <arm-top-navigation observe="#breadcrumb-element"></arm-top-navigation>
+            <arm-top-navigation
+              observe="#breadcrumb-element"
+              desktopbreakpoint="1200"
+              theme="dark"
+              hostname="learn.arm.com"
+              enable-ui-route="true"
+              lang="en"
+              disabled-subnav-animation>
+            </arm-top-navigation>
         </div>
         <!-- Masthead -->
         <div id="expanded-masthead" class="u-bg-color-ads-ui-violet-90">

From 5430d9314d8964a841354e4d46b5ffac43cb7e28 Mon Sep 17 00:00:00 2001
From: Christopher Moroney <christopher.moroney1@gmail.com>
Date: Fri, 17 Jul 2026 10:00:00 -0700
Subject: [PATCH 2/3] Change text to not have cut off button

---
 themes/arm-design-system-hugo-theme/static/js/authentication.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/arm-design-system-hugo-theme/static/js/authentication.js b/themes/arm-design-system-hugo-theme/static/js/authentication.js
index 6380bae482..59bf9dd893 100644
--- a/themes/arm-design-system-hugo-theme/static/js/authentication.js
+++ b/themes/arm-design-system-hugo-theme/static/js/authentication.js
@@ -277,7 +277,7 @@ document.addEventListener('arm-account-signin', (event) => {
 
       const signInButton = shadowRoot.querySelector('.c-utility-navigation-login__sign-in-button');
     if (signInButton) {
-        signInButton.innerHTML = "Redirecting to login...";
+        signInButton.innerHTML = "Redirecting...";
     }
     else {
         console.log("Sign-in button not found in DOM.");

From 4c666f810bd2088e3f51c8a352700b0e560f8836 Mon Sep 17 00:00:00 2001
From: Christopher Moroney <christopher.moroney1@gmail.com>
Date: Fri, 17 Jul 2026 10:22:42 -0700
Subject: [PATCH 3/3] updated based on copilot review

---
 assets/css/cross-page.css                              |  5 +----
 config.toml                                            |  3 +++
 .../layouts/partials/head/head.html                    | 10 +++++++---
 .../static/js/authentication.js                        |  2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/assets/css/cross-page.css b/assets/css/cross-page.css
index 4fb0f740a3..529aa47b2a 100644
--- a/assets/css/cross-page.css
+++ b/assets/css/cross-page.css
@@ -189,10 +189,7 @@ arm-top-navigation:not(:defined) {
     position: relative;
     top: 0;
 }
-.nav-transparent {
-    background: var(--ads-ui-ink-100);
-    background-color: var(--ads-ui-ink-100);
-}
+.nav-transparent,
 .nav-black {
     background: var(--ads-ui-ink-100);
     background-color: var(--ads-ui-ink-100);
diff --git a/config.toml b/config.toml
index c8c86c9e20..75cd2c5ad7 100644
--- a/config.toml
+++ b/config.toml
@@ -73,6 +73,9 @@ github_project_repo = "https://github.com/ArmDeveloperEcosystem/arm-learning-pat
 # location of assets
 assetsDir = "assets"
 
+# Optionally override the global web components bundle for a specific deployment.
+# global_web_components_url = "https://www.arm.com/arm-global-web-components/devhub/app.js"
+
 # Specify a value here if your content directory is not in your repo's root directory
 # github_subdir = ""
 
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html b/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html
index 2c93252da8..30fa11444c 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/head/head.html
@@ -55,11 +55,15 @@
   integrity="sha384-caAG7P/HrHxcdQa2gTEfvZYGPLQk7yRwVdvtRn6sa3TRKzcAyY1LMvObXKGhwFNb"
   crossorigin="anonymous">
 </script>
-    <!-- Arm Header & Footer loading.
-         TODO: Replace the test bundle with its production URL when Arm publishes it. -->
+    <!-- Arm Header & Footer loading. Local development uses the test bundle;
+         production defaults to stable app.js unless a deployment explicitly overrides it. -->
+{{ $globalWebComponentsURL := .Site.Params.global_web_components_url | default "https://www.arm.com/arm-global-web-components/devhub/app.js" }}
+{{ if and hugo.IsServer (not .Site.Params.global_web_components_url) }}
+  {{ $globalWebComponentsURL = "https://www.arm.com/arm-global-web-components/devhub/test.js" }}
+{{ end }}
 <script
   type="text/javascript"
-  src="https://www.arm.com/arm-global-web-components/devhub/test.js"
+  src="{{ $globalWebComponentsURL }}"
   defer>
 </script>
 
diff --git a/themes/arm-design-system-hugo-theme/static/js/authentication.js b/themes/arm-design-system-hugo-theme/static/js/authentication.js
index 59bf9dd893..98e7f915ca 100644
--- a/themes/arm-design-system-hugo-theme/static/js/authentication.js
+++ b/themes/arm-design-system-hugo-theme/static/js/authentication.js
@@ -277,7 +277,7 @@ document.addEventListener('arm-account-signin', (event) => {
 
       const signInButton = shadowRoot.querySelector('.c-utility-navigation-login__sign-in-button');
     if (signInButton) {
-        signInButton.innerHTML = "Redirecting...";
+        signInButton.textContent = "Redirecting...";
     }
     else {
         console.log("Sign-in button not found in DOM.");