This is an automated email from the ASF dual-hosted git repository.
schofielaj pushed a commit to branch markdown
in repository https://gitbox.apache.org/repos/asf/kafka-site.git
The following commit(s) were added to refs/heads/markdown by this push:
new cf85dfeee Update top navbar to be more closer to the current look and
feel (#745)
cf85dfeee is described below
commit cf85dfeee1a78fb129ca0a0b6a26df1e345d4de0
Author: Harish Vishwanath <[email protected]>
AuthorDate: Thu Nov 13 23:45:22 2025 -0800
Update top navbar to be more closer to the current look and feel (#745)
Co-authored-by: Harish Vishwanath
<[email protected]>
---
assets/scss/_variables_project.scss | 42 ++++++++++++++++++++++++++++++++++---
hugo.yaml | 20 +++++++++---------
layouts/partials/navbar.html | 6 +-----
3 files changed, 50 insertions(+), 18 deletions(-)
diff --git a/assets/scss/_variables_project.scss
b/assets/scss/_variables_project.scss
index a5e07b174..f7b25513f 100644
--- a/assets/scss/_variables_project.scss
+++ b/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 {
diff --git a/hugo.yaml b/hugo.yaml
index 06f9428ae..d57069fde 100644
--- a/hugo.yaml
+++ b/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
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 61ca94cf2..c2b501c31 100644
--- a/layouts/partials/navbar.html
+++ b/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 -->
