diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
index f99d3e448..b7c98e26f 100644
--- a/src/learning-header/LearningHeader.jsx
+++ b/src/learning-header/LearningHeader.jsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import Responsive from 'react-responsive';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -30,6 +31,13 @@ const LearningHeader = ({
     <header className="learning-header customise indigo-header-version">
       <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
       <div className="container-xl py-2 d-flex align-items-center">
+        {showUserDropdown && authenticatedUser && (
+          <Responsive maxWidth={991}>
+            <AuthenticatedUserDropdown
+              username={authenticatedUser.username}
+            />
+          </Responsive>
+        )}
         {headerLogo}
         <div className="flex-grow-1 course-title-lockup d-flex" style={{ lineHeight: 1 }}>
           <CourseInfoSlot courseOrg={courseOrg} courseNumber={courseNumber} courseTitle={courseTitle} />
@@ -46,12 +54,14 @@ const LearningHeader = ({
         </div>
         <ThemeToggleButton />
         {showUserDropdown && authenticatedUser && (
-        <>
-          <LearningHelpSlot />
-          <AuthenticatedUserDropdown
-            username={authenticatedUser.username}
-          />
-        </>
+          <>
+            <LearningHelpSlot />
+            <Responsive minWidth={992}>
+              <AuthenticatedUserDropdown
+                username={authenticatedUser.username}
+              />
+            </Responsive>
+          </>
         )}
         {showUserDropdown && !authenticatedUser && (
         <AnonymousUserMenu />
diff --git a/src/learning-header/LearningHeader.test.jsx b/src/learning-header/LearningHeader.test.jsx
index 3d80888ef..9f9cd37d7 100644
--- a/src/learning-header/LearningHeader.test.jsx
+++ b/src/learning-header/LearningHeader.test.jsx
@@ -4,6 +4,16 @@ import {
 } from '../setupTest';
 import { LearningHeader as Header } from '../index';
 
+jest.mock('react-responsive', () => ({
+  __esModule: true,
+  default: ({ minWidth, maxWidth, children }) => {
+    const screenWidth = 1200; // Simulate desktop
+    const matchesMin = minWidth !== undefined ? screenWidth >= minWidth : true;
+    const matchesMax = maxWidth !== undefined ? screenWidth <= maxWidth : true;
+    return matchesMin && matchesMax ? children : null;
+  },
+}));
+
 describe('Header', () => {
   beforeAll(async () => {
     // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.