diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
index 64cf71583b9..693e6b9ba46 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -77,7 +77,7 @@ function getStyles(theme: GrafanaTheme2) {
       position: 'sticky',
       top: 0,
       background: theme.colors.background.canvas,
-      zIndex: theme.zIndex.navbarFixed,
+      zIndex: theme.zIndex.activePanel,
       width: '100%',
       marginLeft: 'auto',
       [theme.breakpoints.down('sm')]: {
diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
index cb8fd8850e0..7950a1f1042 100644
--- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
+++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
@@ -27,15 +27,7 @@ interface Props {
 }
 
 export const NavToolbarActions = React.memo<Props>(({ dashboard }) => {
-  const actions = (
-    <DashNavModalContextProvider>
-      <ToolbarButtonRow alignment="right">
-        <ToolbarActions dashboard={dashboard} />
-      </ToolbarButtonRow>
-      <DashNavModalRoot />
-    </DashNavModalContextProvider>
-  );
-
+  const actions = <ToolbarActions dashboard={dashboard} />;
   return <AppChromeUpdate actions={actions} />;
 });
 
@@ -518,7 +510,12 @@ export function ToolbarActions({ dashboard }: Props) {
     lastGroup = action.group;
   }
 
-  return actionElements;
+  return (
+    <DashNavModalContextProvider>
+      <ToolbarButtonRow alignment="right">{actionElements}</ToolbarButtonRow>
+      <DashNavModalRoot />
+    </DashNavModalContextProvider>
+  );
 }
 
 function addDynamicActions(