diff --git a/public/css/docs/layout.css b/public/css/docs/layout.css
index df018470c..cc534c81e 100644
--- a/public/css/docs/layout.css
+++ b/public/css/docs/layout.css
@@ -1418,6 +1418,17 @@ h2 {
 	margin: 12px;
 }
 
+@media screen and (max-width: 640px) {
+	.side-menu-head .icon-button.side-menu-close-button {
+		border: none;
+	}
+	.side-menu-head .icon-button.side-menu-close-button .icon {
+		width: 24px;
+		height: 24px;
+		margin: 0px;
+	}
+}
+
 .side-menu-wrapper {
 	width: 0;
 }
diff --git a/src/components/top-nav/side-menu/drawer.jsx b/src/components/top-nav/side-menu/drawer.jsx
index 5cc6cee6c..892bf1a17 100644
--- a/src/components/top-nav/side-menu/drawer.jsx
+++ b/src/components/top-nav/side-menu/drawer.jsx
@@ -34,6 +34,7 @@ import namespaces from 'namespace-list';
 import filter from 'filter-pkg-tree';
 import deprefix from 'deprefix-pkg-name';
 import log from 'log';
+import viewportWidth from 'viewport-width';
 import VersionMenu from './version_menu.jsx';
 import Head from './head.jsx';
 import Filter from './filter.jsx';
@@ -798,12 +799,14 @@ class SideMenuDrawer extends React.Component {
 	* @returns {ReactElement} React element
 	*/
 	render() {
+		const isMobile = viewportWidth() <= 640;
 		return (
 			<Drawer
 				className="side-menu-drawer"
-				variant="persistent"
+				variant={isMobile ? 'temporary' : 'persistent'}
 				anchor="left"
 				open={ this.props.open }
+				onClose={isMobile ? this._onMenuClose : undefined}
 				classes={{
 					paper: 'side-menu-drawer'
 				}}