diff --git a/docs/components/docs/docs.tsx b/docs/components/docs/docs.tsx
index 62ea613da5..0c0e81ef40 100644
--- a/docs/components/docs/docs.tsx
+++ b/docs/components/docs/docs.tsx
@@ -44,7 +44,7 @@ export function DocsLayout({ children, ...props }: DocsLayoutProps): ReactNode {
 				>
 					<div
 						className={cn(
-							"[--fd-tocnav-height:36px] md:mr-[268px] lg:mr-[286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px] ",
+							"[--fd-tocnav-height:36px] navbar:mr-[268px] lg:mr-[286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px] ",
 						)}
 					>
 						<ArticleLayout />
diff --git a/docs/components/side-bar.tsx b/docs/components/side-bar.tsx
index 669c0a89e5..942c369e07 100644
--- a/docs/components/side-bar.tsx
+++ b/docs/components/side-bar.tsx
@@ -38,8 +38,8 @@ export default function ArticleLayout() {
 		<div className={cn("fixed start-0 top-0")}>
 			<aside
 				className={cn(
-					"md:transition-all",
-					"border-r border-lines top-[55px] md:flex hidden md:w-[268px] lg:w-[286px] overflow-y-auto absolute h-[calc(100dvh-55px)] pb-2 flex-col justify-between w-[var(--fd-sidebar-width)]",
+					"navbar:transition-all",
+					"border-r border-lines top-[55px] navbar:flex hidden navbar:w-[268px] lg:w-[286px] overflow-y-auto absolute h-[calc(100dvh-55px)] pb-2 flex-col justify-between w-[var(--fd-sidebar-width)]",
 				)}
 			>
 				<div>