Fix: mobile navigation title visibility remove the

custom double nav bar and properly utilize Material's native
navigation.tabs feature.

Signed-off-by: codeEvolveZenith345 <suntiwari3495@gmail.com>

Author: codeEvolveZenith345

docs/stylesheets/extra.css

@@ -671,4 +671,143 @@ a.md-header__button.md-logo img {
   .pipe {
     display: none;
   }
+}
+
+/* Mobile viewport: up to 76.1875em (1220px) */
+@media screen and (max-width: 76.1875em) {
+  
+  .md-header__topic:first-child {
+    display: flex !important;
+    opacity: 1 !important;
+    transform: translateX(0) !important;
+    transition: none !important;
+    pointer-events: auto !important;
+  }
+  
+  .md-header__topic:last-child {
+    display: none !important;
+  }
+  
+  .md-header__title {
+    display: flex !important;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+  
+  .md-header__title[data-md-component="header-title"] {
+    visibility: visible !important;
+  }
+  
+  [data-md-component="header"][data-md-state="shadow"] .md-header__topic:first-child {
+    opacity: 1 !important;
+    transform: translateX(0) !important;
+    z-index: 1;
+  }
+  
+  .md-header__inner {
+    display: flex;
+    align-items: center;
+  }
+  
+  .md-tabs {
+    width: 100%;
+  }
+  
+  .md-nav--primary .md-nav__title {
+    background-color: var(--md-primary-fg-color);
+    color: var(--md-primary-bg-color);
+  }
+  
+  .md-nav--primary .md-nav__item {
+    border-top: 0.05rem solid var(--md-default-fg-color--lightest);
+  }
+}
+
+/* Tablet adjustments: 60em to 76.1875em (960px to 1220px) */
+@media screen and (min-width: 60em) and (max-width: 76.1875em) {
+  
+  .md-header__title {
+    max-width: 40%;
+    flex-shrink: 1;
+  }
+  
+  .md-tabs {
+    margin-top: 0;
+  }
+  
+  .md-header__topic:last-child {
+    display: flex !important;
+    max-width: 100%;
+  }
+}
+
+/* Small mobile: up to 30em (480px) */
+@media screen and (max-width: 30em) {
+  
+  .md-header__button.md-logo {
+    padding: 0.2rem;
+  }
+  
+  .md-header__button.md-logo img,
+  .md-header__button.md-logo svg {
+    width: 2.5rem;
+    height: 2rem;
+  }
+  
+  .md-header__title {
+    font-size: 0.9rem;
+  }
+  
+  .md-header__ellipsis {
+    margin-left: 0.2rem;
+    margin-right: 0.2rem;
+  }
+  
+  .md-header__button[for="__drawer"] {
+    margin-right: 0.2rem;
+  }
+}
+
+/* Desktop: Maintain existing behavior above 76.1875em (1220px) */
+@media screen and (min-width: 76.25em) {
+  
+  /* Restore default Material behavior for desktop */
+  .md-header__topic:first-child {
+    display: flex;
+  }
+  
+  .md-header__topic:last-child {
+    display: flex;
+  }
+  
+  /* Desktop title gets full width */
+  .md-header__title {
+    max-width: 100%;
+  }
+}
+
+/* Update existing 1024px media query for removed hardcoded navigation */
+@media (max-width: 1024px) {
+  [dir=ltr] .md-tabs__list {
+    margin-left: 0 !important; /* Override existing 5rem to 0 */
+  }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+  .md-header__topic {
+    transition: none !important;
+  }
+}
+
+/* Print styles - ensure title is visible */
+@media print {
+  .md-header__topic:first-child {
+    display: block !important;
+    opacity: 1 !important;
+  }
+  
+  .md-header__topic:last-child {
+    display: none !important;
+  }
 }

overrides/partials/header.html

@@ -84,35 +84,6 @@
       {% include "partials/javascripts/palette.html" %}
     {% endif %}
 
-    <!-- Top Nav -->
-    <ul class="md-tabs__list mr-30">
-      <li class="md-tabs__item">
-        <a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" class="md-tabs__link">
-          Home
-        </a>
-      </li>
-      <li class="md-tabs__item">
-        <a href="/docs/" class="md-tabs__link">
-          Docs
-        </a>
-      </li>
-      <li class="md-tabs__item">
-        <a href="/about/testimonials/" class="md-tabs__link">
-          About
-        </a>
-      </li>
-      <li class="md-tabs__item">
-        <a href="/blog/" class="md-tabs__link">
-          Blog
-        </a>
-      </li>
-      <li class="md-tabs__item">
-        <a href="/community/" class="md-tabs__link">
-          Community
-        </a>
-      </li>
-    </ul>
-
     <!-- Site language selector -->
     {% if config.extra.alternate %}
       {% include "partials/alternate.html" %}