diff --git a/public/app/core/components/NavBar/BottomSection.tsx b/public/app/core/components/NavBar/BottomSection.tsx
index 7f68446be61..6987844b9ae 100644
--- a/public/app/core/components/NavBar/BottomSection.tsx
+++ b/public/app/core/components/NavBar/BottomSection.tsx
@@ -100,7 +100,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   container: css`
     display: none;
 
-    @media ${theme.breakpoints.up('md')} {
+    ${theme.breakpoints.up('md')} {
       display: block;
       margin-bottom: ${theme.spacing(2)};
     }
diff --git a/public/app/core/components/NavBar/NavBar.tsx b/public/app/core/components/NavBar/NavBar.tsx
index 52d5803e98e..19296b11984 100644
--- a/public/app/core/components/NavBar/NavBar.tsx
+++ b/public/app/core/components/NavBar/NavBar.tsx
@@ -56,7 +56,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     width: ${theme.components.sidemenu.width}px;
     z-index: ${theme.zIndex.sidemenu};
 
-    @media ${theme.breakpoints.up('md')} {
+    ${theme.breakpoints.up('md')} {
       background-color: ${theme.colors.background.primary};
       position: relative;
     }
@@ -94,7 +94,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
       width: ${theme.spacing(3.5)};
     }
 
-    @media ${theme.breakpoints.up('md')} {
+    ${theme.breakpoints.up('md')} {
       align-items: center;
       display: flex;
       justify-content: center;
@@ -116,7 +116,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     justify-content: space-between;
     padding: ${theme.spacing(2)};
 
-    @media ${theme.breakpoints.up('md')} {
+    ${theme.breakpoints.up('md')} {
       display: none;
     }
   `,
diff --git a/public/app/core/components/NavBar/NavBarItem.tsx b/public/app/core/components/NavBar/NavBarItem.tsx
index 25791b2b071..134d67b2b61 100644
--- a/public/app/core/components/NavBar/NavBarItem.tsx
+++ b/public/app/core/components/NavBar/NavBarItem.tsx
@@ -86,7 +86,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
       }
     }
 
-    @media ${theme.breakpoints.up('md')} {
+    ${theme.breakpoints.up('md')} {
       color: ${isActive ? theme.colors.text.primary : theme.colors.text.secondary};
 
       &:hover {
diff --git a/public/app/core/components/NavBar/TopSection.tsx b/public/app/core/components/NavBar/TopSection.tsx
index d4c5e786d97..4c2b0ad2357 100644
--- a/public/app/core/components/NavBar/TopSection.tsx
+++ b/public/app/core/components/NavBar/TopSection.tsx
@@ -52,7 +52,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: none;
     flex-grow: 1;
 
-    @media ${theme.breakpoints.up('md')} {
+    ${theme.breakpoints.up('md')} {
       display: block;
       margin-top: ${theme.spacing(5)};
     }