diff --git a/packages/clay-css/src/scss/cadmin/variables/_management-bar.scss b/packages/clay-css/src/scss/cadmin/variables/_management-bar.scss
index 8bdd2fe2b9..54617842dc 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_management-bar.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_management-bar.scss
@@ -16,6 +16,8 @@ $cadmin-management-bar-base: map-deep-merge(
 				),
 			),
 		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-management-bar-base
 );
@@ -73,6 +75,8 @@ $cadmin-management-bar-light: map-deep-merge(
 				),
 			),
 		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-management-bar-light
 );
@@ -107,6 +111,8 @@ $cadmin-management-bar-primary: map-deep-merge(
 				),
 			),
 		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-management-bar-primary
 );
diff --git a/packages/clay-css/src/scss/cadmin/variables/_navigation-bar.scss b/packages/clay-css/src/scss/cadmin/variables/_navigation-bar.scss
index 649331cf57..d1b3927442 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_navigation-bar.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_navigation-bar.scss
@@ -38,6 +38,8 @@ $cadmin-navigation-bar-base: map-deep-merge(
 				),
 			),
 		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-navigation-bar-base
 );
@@ -66,6 +68,34 @@ $cadmin-navigation-bar-light: map-deep-merge(
 				),
 			),
 		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: $cadmin-navbar-light-color,
+								font-weight: $cadmin-font-weight-semi-bold,
+								hover: (
+									color: $cadmin-gray-900,
+								),
+								focus: (
+									color: $cadmin-gray-900,
+								),
+								active: (
+									color: $cadmin-navbar-light-active-color,
+								),
+								disabled: (
+									color: $cadmin-gray-600,
+									opacity: $cadmin-btn-disabled-opacity,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		media-breakpoint-up: (),
 	),
 	$cadmin-navigation-bar-light
 );
@@ -100,6 +130,34 @@ $cadmin-navigation-bar-secondary: map-deep-merge(
 				color: rgba(255, 255, 255, 0.9),
 			),
 		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: $cadmin-secondary-l2,
+								font-weight: $cadmin-font-weight-semi-bold,
+								hover: (
+									color: $cadmin-white,
+								),
+								focus: (
+									color: $cadmin-white,
+								),
+								active: (
+									color: $cadmin-white,
+								),
+								disabled: (
+									color: $cadmin-gray-400,
+									opacity: $cadmin-btn-disabled-opacity,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		media-breakpoint-up: (),
 	),
 	$cadmin-navigation-bar-secondary
 );
diff --git a/packages/clay-css/src/scss/cadmin/variables/_sidebar.scss b/packages/clay-css/src/scss/cadmin/variables/_sidebar.scss
index 35f69bef70..b078b198c8 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_sidebar.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_sidebar.scss
@@ -129,6 +129,8 @@ $cadmin-sidebar-light-navigation-bar: map-deep-merge(
 				),
 			),
 		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$cadmin-sidebar-light-navigation-bar
 );