Update top navbar to be more closer to the current look and feel

assets/scss/_variables_project.scss

@@ -213,6 +213,17 @@ button.navbar-toggler {
         align-items: center;
         width: 100%;
         text-align: left;
+        text-transform: uppercase !important;
+
+        // Ensure text-transform applies to all children (like spans)
+        &, span {
+          text-transform: uppercase !important;
+        }
+
+        // Explicitly target dropdown-toggle
+        &.dropdown-toggle {
+          text-transform: uppercase !important;
+        }
 
         &:hover {
           background-color: #f8f9fa;
@@ -408,6 +419,16 @@ button.navbar-toggler {
   }
 }
 
+// Force uppercase on ALL navbar navigation items
+.td-navbar .navbar-nav .nav-link,
+.td-navbar .navbar-nav .nav-link.dropdown-toggle {
+  text-transform: uppercase !important;
+
+  &, span {
+    text-transform: uppercase !important;
+  }
+}
+
 // Nav link styling for better visibility
 .td-navbar .nav-link {
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -417,17 +438,26 @@ button.navbar-toggler {
   padding: 0.5rem 1rem;
   transition: color 0.2s ease;
   letter-spacing: 0.3px;
+  text-transform: uppercase !important;
 
-  &:hover,
-  &:focus {
-    color: #007bff;
+  // Ensure text-transform applies to all children (like spans)
+  &, span {
+    text-transform: uppercase !important;
   }
 
+  // Explicitly target dropdown-toggle to ensure uppercase
   &.dropdown-toggle {
+    text-transform: uppercase !important;
+
     &:hover {
       color: #007bff;
     }
   }
+
+  &:hover,
+  &:focus {
+    color: #007bff;
+  }
 }
 
 // Style dropdown menus
@@ -452,6 +482,12 @@ button.navbar-toggler {
     font-size: 0.9375rem;
     font-weight: 400;
     transition: all 0.2s ease;
+    text-transform: uppercase;
+
+    // Ensure text-transform applies to all children (like spans)
+    &, span {
+      text-transform: uppercase;
+    }
 
     &:hover,
     &:focus {

hugo.yaml

@@ -94,43 +94,43 @@ menu:
   main:
     # Point this to the latest documentation version.
     # URLs are dynamically constructed in navbar.html using params.latest_version
-    - name: "DOCS"
+    - name: "Docs"
       url: "{{VERSION}}"
       weight: 20
     - name: "Getting Started"
-      parent: "DOCS"
+      parent: "Docs"
       url: "{{VERSION}}/getting-started/"
       weight: 21
     - name: "APIs"
-      parent: "DOCS"
+      parent: "Docs"
       url: "{{VERSION}}/apis/"
       weight: 22
     - name: "Configuration"
-      parent: "DOCS"
+      parent: "Docs"
       url: "{{VERSION}}/configuration/"
       weight: 23
     - name: "Design"
-      parent: "DOCS"
+      parent: "Docs"
       url: "{{VERSION}}/design/"
       weight: 24
     - name: "Implementation"
-      parent: "DOCS"
+      parent: "Docs"
       url: "{{VERSION}}/implementation/"
       weight: 25
     - name: "Operations"
-      parent: "DOCS"
+      parent: "Docs"
       url: "{{VERSION}}/operations/"
       weight: 26
     - name: "Security"
-      parent: "DOCS"
+      parent: "Docs"
       url: "{{VERSION}}/security/"
       weight: 27
     - name: "Kafka Connect"
-      parent: "DOCS"
+      parent: "Docs"
       url: "{{VERSION}}/kafka-connect/"
       weight: 28
     - name: "Kafka Streams"
-      parent: "DOCS"
+      parent: "Docs"
       url: "{{VERSION}}/streams/"
       weight: 29
     # Add a top level menu pointing to downloads page

layouts/partials/navbar.html

@@ -10,13 +10,9 @@
   <a class="navbar-brand order-1 order-lg-0 mx-auto mx-lg-0" href="{{ .Site.Home.RelPermalink }}">
     <span class="navbar-brand__logo navbar-logo">
       {{- if .Site.Params.ui.navbar_logo -}}
-        {{ with resources.Get "icons/logo.svg" -}}
-          {{ ( . | minify).Content | safeHTML }}
-        {{- end }}
+        <img src="/logos/kafka_logo--simple.png" alt="Apache Kafka" class="navbar-logo-img">
       {{- end -}}
     </span>
-    <span class="navbar-brand__name d-none d-lg-inline">Apache Kafka</span>
-    <span class="navbar-brand__name d-lg-none">kafka</span>
   </a>
 
   <!-- Spacer for mobile to balance layout -->