diff --git a/packages/shared-ux/page/solution_nav/src/__snapshots__/solution_nav.test.tsx.snap b/packages/shared-ux/page/solution_nav/src/__snapshots__/solution_nav.test.tsx.snap
index 466d3bcf0dea69..1db22e47d0c52a 100644
--- a/packages/shared-ux/page/solution_nav/src/__snapshots__/solution_nav.test.tsx.snap
+++ b/packages/shared-ux/page/solution_nav/src/__snapshots__/solution_nav.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`SolutionNav accepts EuiSideNavProps 1`] = `
 <Fragment>
   <EuiCollapsibleNavGroup
     background="none"
-    className="kbnSolutionNav"
+    className="kbnSolutionNav kbnSolutionNav--hidden"
     initialIsOpen={false}
     isCollapsible={true}
     paddingSize="none"
@@ -36,7 +36,7 @@ exports[`SolutionNav accepts EuiSideNavProps 1`] = `
       paddingSize="s"
     >
       <EuiSideNav
-        aria-hidden={false}
+        aria-hidden={true}
         aria-labelledby="SolutionNav_generated-id_heading"
         data-test-subj="DTS"
         items={
@@ -48,23 +48,23 @@ exports[`SolutionNav accepts EuiSideNavProps 1`] = `
                   "id": "1.1",
                   "items": undefined,
                   "name": "Ingest Node Pipelines",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "1.2",
                   "items": undefined,
                   "name": "Logstash Pipelines",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "1.3",
                   "items": undefined,
                   "name": "Beats Central Management",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
               ],
               "name": "Ingest",
-              "tabIndex": undefined,
+              "tabIndex": -1,
             },
             Object {
               "id": "2",
@@ -73,23 +73,23 @@ exports[`SolutionNav accepts EuiSideNavProps 1`] = `
                   "id": "2.1",
                   "items": undefined,
                   "name": "Index Management",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "2.2",
                   "items": undefined,
                   "name": "Index Lifecycle Policies",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "2.3",
                   "items": undefined,
                   "name": "Snapshot and Restore",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
               ],
               "name": "Data",
-              "tabIndex": undefined,
+              "tabIndex": -1,
             },
           ]
         }
@@ -97,6 +97,95 @@ exports[`SolutionNav accepts EuiSideNavProps 1`] = `
       />
     </EuiPanel>
   </EuiCollapsibleNavGroup>
+  <div
+    className="kbnSolutionNav kbnSolutionNav--hidden"
+  >
+    <EuiTitle
+      id="SolutionNav_generated-id_heading"
+      size="xs"
+    >
+      <h2>
+        <strong>
+          <FormattedMessage
+            defaultMessage="{solutionName} {menuText}"
+            id="sharedUXPackages.solutionNav.mobileTitleText"
+            values={
+              Object {
+                "menuText": "menu",
+                "solutionName": "Solution",
+              }
+            }
+          />
+        </strong>
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiSideNav
+      aria-hidden={true}
+      aria-labelledby="SolutionNav_generated-id_heading"
+      data-test-subj="DTS"
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "items": Array [
+              Object {
+                "id": "1.1",
+                "items": undefined,
+                "name": "Ingest Node Pipelines",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "1.2",
+                "items": undefined,
+                "name": "Logstash Pipelines",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "1.3",
+                "items": undefined,
+                "name": "Beats Central Management",
+                "tabIndex": -1,
+              },
+            ],
+            "name": "Ingest",
+            "tabIndex": -1,
+          },
+          Object {
+            "id": "2",
+            "items": Array [
+              Object {
+                "id": "2.1",
+                "items": undefined,
+                "name": "Index Management",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "2.2",
+                "items": undefined,
+                "name": "Index Lifecycle Policies",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "2.3",
+                "items": undefined,
+                "name": "Snapshot and Restore",
+                "tabIndex": -1,
+              },
+            ],
+            "name": "Data",
+            "tabIndex": -1,
+          },
+        ]
+      }
+      mobileBreakpoints={Array []}
+    />
+  </div>
+  <SolutionNavCollapseButton
+    isCollapsed={true}
+  />
 </Fragment>
 `;
 
@@ -104,7 +193,7 @@ exports[`SolutionNav accepts canBeCollapsed prop 1`] = `
 <Fragment>
   <EuiCollapsibleNavGroup
     background="none"
-    className="kbnSolutionNav"
+    className="kbnSolutionNav kbnSolutionNav--hidden"
     initialIsOpen={false}
     isCollapsible={true}
     paddingSize="none"
@@ -136,7 +225,7 @@ exports[`SolutionNav accepts canBeCollapsed prop 1`] = `
       paddingSize="s"
     >
       <EuiSideNav
-        aria-hidden={false}
+        aria-hidden={true}
         aria-labelledby="SolutionNav_generated-id_heading"
         items={
           Array [
@@ -147,23 +236,23 @@ exports[`SolutionNav accepts canBeCollapsed prop 1`] = `
                   "id": "1.1",
                   "items": undefined,
                   "name": "Ingest Node Pipelines",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "1.2",
                   "items": undefined,
                   "name": "Logstash Pipelines",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "1.3",
                   "items": undefined,
                   "name": "Beats Central Management",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
               ],
               "name": "Ingest",
-              "tabIndex": undefined,
+              "tabIndex": -1,
             },
             Object {
               "id": "2",
@@ -172,23 +261,23 @@ exports[`SolutionNav accepts canBeCollapsed prop 1`] = `
                   "id": "2.1",
                   "items": undefined,
                   "name": "Index Management",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "2.2",
                   "items": undefined,
                   "name": "Index Lifecycle Policies",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "2.3",
                   "items": undefined,
                   "name": "Snapshot and Restore",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
               ],
               "name": "Data",
-              "tabIndex": undefined,
+              "tabIndex": -1,
             },
           ]
         }
@@ -196,6 +285,94 @@ exports[`SolutionNav accepts canBeCollapsed prop 1`] = `
       />
     </EuiPanel>
   </EuiCollapsibleNavGroup>
+  <div
+    className="kbnSolutionNav kbnSolutionNav--hidden"
+  >
+    <EuiTitle
+      id="SolutionNav_generated-id_heading"
+      size="xs"
+    >
+      <h2>
+        <strong>
+          <FormattedMessage
+            defaultMessage="{solutionName} {menuText}"
+            id="sharedUXPackages.solutionNav.mobileTitleText"
+            values={
+              Object {
+                "menuText": "menu",
+                "solutionName": "Solution",
+              }
+            }
+          />
+        </strong>
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiSideNav
+      aria-hidden={true}
+      aria-labelledby="SolutionNav_generated-id_heading"
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "items": Array [
+              Object {
+                "id": "1.1",
+                "items": undefined,
+                "name": "Ingest Node Pipelines",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "1.2",
+                "items": undefined,
+                "name": "Logstash Pipelines",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "1.3",
+                "items": undefined,
+                "name": "Beats Central Management",
+                "tabIndex": -1,
+              },
+            ],
+            "name": "Ingest",
+            "tabIndex": -1,
+          },
+          Object {
+            "id": "2",
+            "items": Array [
+              Object {
+                "id": "2.1",
+                "items": undefined,
+                "name": "Index Management",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "2.2",
+                "items": undefined,
+                "name": "Index Lifecycle Policies",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "2.3",
+                "items": undefined,
+                "name": "Snapshot and Restore",
+                "tabIndex": -1,
+              },
+            ],
+            "name": "Data",
+            "tabIndex": -1,
+          },
+        ]
+      }
+      mobileBreakpoints={Array []}
+    />
+  </div>
+  <SolutionNavCollapseButton
+    isCollapsed={true}
+  />
 </Fragment>
 `;
 
@@ -295,6 +472,91 @@ exports[`SolutionNav accepts canBeCollapsed prop 2`] = `
       />
     </EuiPanel>
   </EuiCollapsibleNavGroup>
+  <div
+    className="kbnSolutionNav"
+  >
+    <EuiTitle
+      id="SolutionNav_generated-id_heading"
+      size="xs"
+    >
+      <h2>
+        <strong>
+          <FormattedMessage
+            defaultMessage="{solutionName} {menuText}"
+            id="sharedUXPackages.solutionNav.mobileTitleText"
+            values={
+              Object {
+                "menuText": "menu",
+                "solutionName": "Solution",
+              }
+            }
+          />
+        </strong>
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiSideNav
+      aria-hidden={false}
+      aria-labelledby="SolutionNav_generated-id_heading"
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "items": Array [
+              Object {
+                "id": "1.1",
+                "items": undefined,
+                "name": "Ingest Node Pipelines",
+                "tabIndex": undefined,
+              },
+              Object {
+                "id": "1.2",
+                "items": undefined,
+                "name": "Logstash Pipelines",
+                "tabIndex": undefined,
+              },
+              Object {
+                "id": "1.3",
+                "items": undefined,
+                "name": "Beats Central Management",
+                "tabIndex": undefined,
+              },
+            ],
+            "name": "Ingest",
+            "tabIndex": undefined,
+          },
+          Object {
+            "id": "2",
+            "items": Array [
+              Object {
+                "id": "2.1",
+                "items": undefined,
+                "name": "Index Management",
+                "tabIndex": undefined,
+              },
+              Object {
+                "id": "2.2",
+                "items": undefined,
+                "name": "Index Lifecycle Policies",
+                "tabIndex": undefined,
+              },
+              Object {
+                "id": "2.3",
+                "items": undefined,
+                "name": "Snapshot and Restore",
+                "tabIndex": undefined,
+              },
+            ],
+            "name": "Data",
+            "tabIndex": undefined,
+          },
+        ]
+      }
+      mobileBreakpoints={Array []}
+    />
+  </div>
 </Fragment>
 `;
 
@@ -302,7 +564,7 @@ exports[`SolutionNav heading accepts more headingProps 1`] = `
 <Fragment>
   <EuiCollapsibleNavGroup
     background="none"
-    className="kbnSolutionNav"
+    className="kbnSolutionNav kbnSolutionNav--hidden"
     initialIsOpen={false}
     isCollapsible={true}
     paddingSize="none"
@@ -334,6 +596,35 @@ exports[`SolutionNav heading accepts more headingProps 1`] = `
       paddingSize="s"
     />
   </EuiCollapsibleNavGroup>
+  <div
+    className="kbnSolutionNav kbnSolutionNav--hidden"
+  >
+    <EuiTitle
+      id="testID"
+      size="xs"
+    >
+      <h3>
+        <strong>
+          <FormattedMessage
+            defaultMessage="{solutionName} {menuText}"
+            id="sharedUXPackages.solutionNav.mobileTitleText"
+            values={
+              Object {
+                "menuText": "menu",
+                "solutionName": "Solution",
+              }
+            }
+          />
+        </strong>
+      </h3>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+  </div>
+  <SolutionNavCollapseButton
+    isCollapsed={true}
+  />
 </Fragment>
 `;
 
@@ -341,7 +632,7 @@ exports[`SolutionNav renders 1`] = `
 <Fragment>
   <EuiCollapsibleNavGroup
     background="none"
-    className="kbnSolutionNav"
+    className="kbnSolutionNav kbnSolutionNav--hidden"
     initialIsOpen={false}
     isCollapsible={true}
     paddingSize="none"
@@ -373,7 +664,7 @@ exports[`SolutionNav renders 1`] = `
       paddingSize="s"
     >
       <EuiSideNav
-        aria-hidden={false}
+        aria-hidden={true}
         aria-labelledby="SolutionNav_generated-id_heading"
         items={
           Array [
@@ -384,23 +675,23 @@ exports[`SolutionNav renders 1`] = `
                   "id": "1.1",
                   "items": undefined,
                   "name": "Ingest Node Pipelines",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "1.2",
                   "items": undefined,
                   "name": "Logstash Pipelines",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "1.3",
                   "items": undefined,
                   "name": "Beats Central Management",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
               ],
               "name": "Ingest",
-              "tabIndex": undefined,
+              "tabIndex": -1,
             },
             Object {
               "id": "2",
@@ -409,23 +700,23 @@ exports[`SolutionNav renders 1`] = `
                   "id": "2.1",
                   "items": undefined,
                   "name": "Index Management",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "2.2",
                   "items": undefined,
                   "name": "Index Lifecycle Policies",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "2.3",
                   "items": undefined,
                   "name": "Snapshot and Restore",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
               ],
               "name": "Data",
-              "tabIndex": undefined,
+              "tabIndex": -1,
             },
           ]
         }
@@ -433,6 +724,94 @@ exports[`SolutionNav renders 1`] = `
       />
     </EuiPanel>
   </EuiCollapsibleNavGroup>
+  <div
+    className="kbnSolutionNav kbnSolutionNav--hidden"
+  >
+    <EuiTitle
+      id="SolutionNav_generated-id_heading"
+      size="xs"
+    >
+      <h2>
+        <strong>
+          <FormattedMessage
+            defaultMessage="{solutionName} {menuText}"
+            id="sharedUXPackages.solutionNav.mobileTitleText"
+            values={
+              Object {
+                "menuText": "menu",
+                "solutionName": "Solution",
+              }
+            }
+          />
+        </strong>
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiSideNav
+      aria-hidden={true}
+      aria-labelledby="SolutionNav_generated-id_heading"
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "items": Array [
+              Object {
+                "id": "1.1",
+                "items": undefined,
+                "name": "Ingest Node Pipelines",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "1.2",
+                "items": undefined,
+                "name": "Logstash Pipelines",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "1.3",
+                "items": undefined,
+                "name": "Beats Central Management",
+                "tabIndex": -1,
+              },
+            ],
+            "name": "Ingest",
+            "tabIndex": -1,
+          },
+          Object {
+            "id": "2",
+            "items": Array [
+              Object {
+                "id": "2.1",
+                "items": undefined,
+                "name": "Index Management",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "2.2",
+                "items": undefined,
+                "name": "Index Lifecycle Policies",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "2.3",
+                "items": undefined,
+                "name": "Snapshot and Restore",
+                "tabIndex": -1,
+              },
+            ],
+            "name": "Data",
+            "tabIndex": -1,
+          },
+        ]
+      }
+      mobileBreakpoints={Array []}
+    />
+  </div>
+  <SolutionNavCollapseButton
+    isCollapsed={true}
+  />
 </Fragment>
 `;
 
@@ -440,7 +819,7 @@ exports[`SolutionNav renders with icon 1`] = `
 <Fragment>
   <EuiCollapsibleNavGroup
     background="none"
-    className="kbnSolutionNav"
+    className="kbnSolutionNav kbnSolutionNav--hidden"
     initialIsOpen={false}
     isCollapsible={true}
     paddingSize="none"
@@ -477,7 +856,7 @@ exports[`SolutionNav renders with icon 1`] = `
       paddingSize="s"
     >
       <EuiSideNav
-        aria-hidden={false}
+        aria-hidden={true}
         aria-labelledby="SolutionNav_generated-id_heading"
         items={
           Array [
@@ -488,23 +867,23 @@ exports[`SolutionNav renders with icon 1`] = `
                   "id": "1.1",
                   "items": undefined,
                   "name": "Ingest Node Pipelines",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "1.2",
                   "items": undefined,
                   "name": "Logstash Pipelines",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "1.3",
                   "items": undefined,
                   "name": "Beats Central Management",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
               ],
               "name": "Ingest",
-              "tabIndex": undefined,
+              "tabIndex": -1,
             },
             Object {
               "id": "2",
@@ -513,23 +892,23 @@ exports[`SolutionNav renders with icon 1`] = `
                   "id": "2.1",
                   "items": undefined,
                   "name": "Index Management",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "2.2",
                   "items": undefined,
                   "name": "Index Lifecycle Policies",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
                 Object {
                   "id": "2.3",
                   "items": undefined,
                   "name": "Snapshot and Restore",
-                  "tabIndex": undefined,
+                  "tabIndex": -1,
                 },
               ],
               "name": "Data",
-              "tabIndex": undefined,
+              "tabIndex": -1,
             },
           ]
         }
@@ -537,5 +916,98 @@ exports[`SolutionNav renders with icon 1`] = `
       />
     </EuiPanel>
   </EuiCollapsibleNavGroup>
+  <div
+    className="kbnSolutionNav kbnSolutionNav--hidden"
+  >
+    <EuiTitle
+      id="SolutionNav_generated-id_heading"
+      size="xs"
+    >
+      <h2>
+        <KibanaSolutionAvatar
+          className="kbnSolutionNav__avatar"
+          iconType="logoElastic"
+          name="Solution"
+        />
+        <strong>
+          <FormattedMessage
+            defaultMessage="{solutionName} {menuText}"
+            id="sharedUXPackages.solutionNav.mobileTitleText"
+            values={
+              Object {
+                "menuText": "menu",
+                "solutionName": "Solution",
+              }
+            }
+          />
+        </strong>
+      </h2>
+    </EuiTitle>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiSideNav
+      aria-hidden={true}
+      aria-labelledby="SolutionNav_generated-id_heading"
+      items={
+        Array [
+          Object {
+            "id": "1",
+            "items": Array [
+              Object {
+                "id": "1.1",
+                "items": undefined,
+                "name": "Ingest Node Pipelines",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "1.2",
+                "items": undefined,
+                "name": "Logstash Pipelines",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "1.3",
+                "items": undefined,
+                "name": "Beats Central Management",
+                "tabIndex": -1,
+              },
+            ],
+            "name": "Ingest",
+            "tabIndex": -1,
+          },
+          Object {
+            "id": "2",
+            "items": Array [
+              Object {
+                "id": "2.1",
+                "items": undefined,
+                "name": "Index Management",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "2.2",
+                "items": undefined,
+                "name": "Index Lifecycle Policies",
+                "tabIndex": -1,
+              },
+              Object {
+                "id": "2.3",
+                "items": undefined,
+                "name": "Snapshot and Restore",
+                "tabIndex": -1,
+              },
+            ],
+            "name": "Data",
+            "tabIndex": -1,
+          },
+        ]
+      }
+      mobileBreakpoints={Array []}
+    />
+  </div>
+  <SolutionNavCollapseButton
+    isCollapsed={true}
+  />
 </Fragment>
 `;
diff --git a/packages/shared-ux/page/solution_nav/src/solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/solution_nav.tsx
index 31950f716c225f..d6b9a2063e609f 100644
--- a/packages/shared-ux/page/solution_nav/src/solution_nav.tsx
+++ b/packages/shared-ux/page/solution_nav/src/solution_nav.tsx
@@ -22,6 +22,7 @@ import {
   EuiTitle,
   htmlIdGenerator,
   useIsWithinBreakpoints,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -100,7 +101,7 @@ export const SolutionNav: FC<SolutionNavProps> = ({
 }) => {
   const isSmallerBreakpoint = useIsWithinBreakpoints(mobileBreakpoints);
   const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
-  const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
+  const isLargerBreakpoint = useIsWithinMinBreakpoint('l');
 
   // This is used for both the `EuiSideNav` and `EuiFlyout` toggling
   const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
index ef94ed89ac8737..a618f6d6ba41c2 100644
--- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
+++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx
@@ -8,7 +8,12 @@
 
 import React, { ComponentType, ReactNode, useState } from 'react';
 import classNames from 'classnames';
-import { useIsWithinBreakpoints, useEuiTheme, EuiPageSidebarProps } from '@elastic/eui';
+import {
+  useIsWithinBreakpoints,
+  useEuiTheme,
+  useIsWithinMinBreakpoint,
+  EuiPageSidebarProps,
+} from '@elastic/eui';
 import { SolutionNav, SolutionNavProps } from './solution_nav';
 
 import './with_solution_nav.scss';
@@ -35,7 +40,7 @@ const SOLUTION_NAV_COLLAPSED_KEY = 'solutionNavIsCollapsed';
 export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: ComponentType<P>) => {
   const WithSolutionNav = (props: Props<P>) => {
     const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
-    const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
+    const isLargerBreakpoint = useIsWithinMinBreakpoint('l');
     const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState(
       !JSON.parse(String(localStorage.getItem(SOLUTION_NAV_COLLAPSED_KEY)))
     );
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.test.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.test.tsx
index 6b99a68c043aac..3ff29d0f693e18 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.test.tsx
@@ -16,12 +16,12 @@ import type { DefaultSideNavItem } from './types';
 import { bottomNavOffset } from '../../../lib/helpers';
 import { BETA } from '@kbn/kubernetes-security-plugin/common/translations';
 
-const mockUseIsWithinBreakpoints = jest.fn(() => true);
+const mockUseIsWithinMinBreakpoint = jest.fn(() => true);
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    useIsWithinBreakpoints: () => mockUseIsWithinBreakpoints(),
+    useIsWithinMinBreakpoint: () => mockUseIsWithinMinBreakpoint(),
   };
 });
 
@@ -143,14 +143,14 @@ describe('SolutionGroupedNav', () => {
 
   describe('bottom offset', () => {
     it('should add bottom offset', () => {
-      mockUseIsWithinBreakpoints.mockReturnValueOnce(true);
+      mockUseIsWithinMinBreakpoint.mockReturnValueOnce(true);
       const result = renderNavPanel({ bottomOffset: bottomNavOffset });
 
       expect(result.getByTestId('groupedNavPanel')).toHaveStyle({ bottom: bottomNavOffset });
     });
 
     it('should not add bottom offset if not large screen', () => {
-      mockUseIsWithinBreakpoints.mockReturnValueOnce(false);
+      mockUseIsWithinMinBreakpoint.mockReturnValueOnce(false);
       const result = renderNavPanel({ bottomOffset: bottomNavOffset });
 
       expect(result.getByTestId('groupedNavPanel')).not.toHaveStyle({ bottom: bottomNavOffset });
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.tsx b/x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.tsx
index 4516f103f9167b..304de1419a7a52 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/solution_grouped_nav/solution_grouped_nav_panel.tsx
@@ -20,7 +20,7 @@ import {
   EuiTitle,
   EuiWindowEvent,
   keys,
-  useIsWithinBreakpoints,
+  useIsWithinMinBreakpoint,
 } from '@elastic/eui';
 import classNames from 'classnames';
 import { EuiPanelStyled, FlexLink } from './solution_grouped_nav_panel.styles';
@@ -57,7 +57,7 @@ const SolutionNavPanelComponent: React.FC<SolutionNavPanelProps> = ({
   items,
   bottomOffset,
 }) => {
-  const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
+  const isLargerBreakpoint = useIsWithinMinBreakpoint('l');
   const panelClasses = classNames('eui-yScroll');
 
   // Only larger breakpoint needs to add bottom offset, other sizes should have full height