fix responsive menu style

site/theme/static/responsive.less

@@ -5,7 +5,7 @@
   top: 32px;
   z-index: 1;
   width: 16px;
-  height: 50px;
+  height: 22px;
   cursor: pointer;
 }
 
@@ -53,9 +53,6 @@
     text-align: center;
   }
 
-  #nav, .lang {
-    float: none;
-  }
   button.lang {
     display: block;
     margin: 29px auto 16px;
@@ -63,12 +60,17 @@
     border-color: #666;
   }
 
-  .nav {
-    .ant-popover-inner-content {
-      padding: 0;
+  .popover-menu {
+    width: 300px;
+    button.lang {
+      margin: 16px auto;
+      float: none;
     }
-    .ant-menu-item-selected {
-      border-right: 1px solid #e9e9e9;
+    .ant-popover-inner {
+      overflow: hidden;
+      &-content {
+        padding: 0;
+      }
     }
   }
 
@@ -82,6 +84,7 @@
     line-height: 60px;
     height: 60px;
     padding: 0 !important;
+    border: 0;
     a {
       color: #333;
     }

site/theme/template/Layout/Header.jsx

@@ -141,19 +141,20 @@ export default class Header extends React.Component {
     const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search Components...';
     return (
       <header id="header" className={headerClassName}>
-        <Popover
-          overlayClassName="nav"
+        {menuMode === 'inline' ? <Popover
+          overlayClassName="popover-menu"
           placement="bottomRight"
-          content={menuMode === 'inline' ? menu : null}
+          content={menu}
           trigger="click"
+          arrowPointAtCenter
         >
           <Icon
             className="nav-phone-icon"
             type="menu"
           />
-        </Popover>
+        </Popover> : null}
         <Row>
-          <Col lg={4} md={6} sm={7} xs={24}>
+          <Col lg={4} md={6} sm={24} xs={24}>
             <Link to={{ query, pathname: '/' }} id="logo">
               <img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
               <span>Ant Design</span>