Skip to content

update in navbar #1825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SahilChachane-27 wants to merge 4 commits into
base: main
Choose a base branch
from
+115 −7
Open

update in navbar #1825

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4f56bd9
update in navbar
SahilChachane-27 May 31, 2026
b6839d8
update navbar
SahilChachane-27 May 31, 2026
6926477
Merge branch 'main' into main
SahilChachane-27 Jun 2, 2026
0a5239f
Merge branch 'main' into main
SahilChachane-27 Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 115 additions & 7 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -443,6 +443,7 @@ html[data-theme="dark"] article blockquote {
margin: 0;
height: 60px;
display: flex;
width: 100%;
}

.navbar__brand {
Expand Down Expand Up @@ -501,6 +502,7 @@ html[data-theme="dark"] article blockquote {
gap: 0.3rem !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0;
Comment thread
SahilChachane-27 marked this conversation as resolved.
}

.mb-10.text-center>p.mx-auto.max-w-3xl {
Expand All @@ -527,12 +529,14 @@ html[data-theme="dark"] article blockquote {
padding: 0.3rem 0.5rem;
font-size: 0.85rem;
line-height: 1.2;
white-space: nowrap;
}

.navbar__link {
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}

/* Fix icon alignment in navbar */
Expand Down Expand Up @@ -746,14 +750,21 @@ body {
}

/* ===== SECTION 11: CRITICAL FIX: TABLET/IPAD NAVBAR BEHAVIOR ===== */
@media screen and (max-width: 996px) {
@media screen and (max-width: 1200px) {
/* Hide TOP navbar items on mobile (not sidebar) */

/*
* Hide all navbar items on small screens except the toggle, brand,
* and the Clerk auth control.
* Hide top-level navbar items before they collide. Docusaurus' default
* mobile breakpoint is 996px, but this navbar has enough links to overflow
* on tablets and smaller laptops.
*/
.navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( :has(#firebase-auth-github-navbar)) {
.navbar__inner>.navbar__items>.navbar__item:not(.navbar__toggle):not(:has(#clerk-auth-navbar)) {
display: none !important;
}

.navbar__items--right>.navbar__item:not(:has(#clerk-auth-navbar)),
.navbar__items--right .algolia-sitesearch-navbar,
.navbar__items--right .colorModeToggle {
display: none !important;
}

Expand All @@ -778,11 +789,13 @@ body {
max-width: 100% !important;
padding: 0 !important;
width: 100% !important;
gap: 0.5rem !important;
}

/* Logo and brand adjustments */
.navbar__brand {
margin-right: 1.5rem !important;
min-width: 0 !important;
margin-right: auto !important;
}

.navbar__logo {
Expand All @@ -791,11 +804,16 @@ body {

.navbar__title {
font-size: 1rem !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}

/* Ensure sidebar toggle is always visible */
.navbar__toggle {
display: block !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
margin-right: 0.5rem !important;
}

Expand Down Expand Up @@ -2755,6 +2773,94 @@ html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
END SECTION 15
===================================================== */

/* ===== RESPONSIVE NAVBAR OVERFLOW FIX ===== */
@media screen and (min-width: 1401px) {
.navbar__inner {
gap: 0.5rem !important;
}

.navbar__items:not(.navbar__items--right) {
flex: 1 1 auto !important;
min-width: 0 !important;
}

.navbar__items--right {
flex: 0 0 auto !important;
}

.navbar__items>.navbar__item {
flex: 0 0 auto !important;
}
}

@media screen and (max-width: 1400px) {
.navbar,
.navbar .navbar__inner {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}

.navbar .navbar__inner {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0.5rem !important;
}

.navbar .navbar__items {
min-width: 0 !important;
}

.navbar .navbar__items:not(.navbar__items--right) {
flex: 1 1 auto !important;
overflow: hidden !important;
}

.navbar .navbar__items--right {
flex: 0 0 auto !important;
margin-left: auto !important;
}

.navbar .navbar__toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 40px !important;
width: 40px !important;
height: 40px !important;
}

.navbar .navbar__brand {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
margin-right: 0 !important;
overflow: hidden !important;
}

.navbar .navbar__title {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}

.navbar__inner>.navbar__items>.navbar__item:not(.navbar__toggle),
.navbar__items--right>.navbar__item,
.navbar__items--right .algolia-sitesearch-navbar,
.navbar__items--right .colorModeToggle {
display: none !important;
}

.navbar-sidebar .navbar__item,
.navbar-sidebar .navbar__link,
.navbar-sidebar .dropdown {
display: block !important;
white-space: normal !important;
}
}

/* ===== MOBILE TOP-GAP FIX ===== */
@media screen and (max-width: 996px) {

Expand Down Expand Up @@ -2932,5 +3038,7 @@ main[class*='docMainContainer_'] {
.theme-doc-sidebar-container,
.menu--responsive,
div[class*='sidebarViewport_'] {
z-index: 9999 !important;
}
z-index: 9999 !important;
}
}
Loading