diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
index 0f28006f166b..5b2b5a0fc595 100644
--- a/lib/core/DocsLayout.js
+++ b/lib/core/DocsLayout.js
@@ -46,6 +46,18 @@ class DocsLayout extends React.Component {
     const title =
       idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle;
     const hasOnPageNav = this.props.config.onPageNav === 'separate';
+
+    const previousTitle =
+      idx(i18n, ['localized-strings', metadata.previous_id]) ||
+      idx(i18n, ['localized-strings', 'previous']) ||
+      metadata.previous_title ||
+      'Previous';
+    const nextTitle =
+      idx(i18n, ['localized-strings', metadata.next_id]) ||
+      idx(i18n, ['localized-strings', 'next']) ||
+      metadata.next_title ||
+      'Next';
+
     return (
       <Site
         config={this.props.config}
@@ -78,11 +90,14 @@ class DocsLayout extends React.Component {
                     metadata.localized_id,
                     metadata.previous_id
                   )}>
-                  ←{' '}
-                  {idx(i18n, ['localized-strings', metadata.previous_id]) ||
-                    idx(i18n, ['localized-strings', 'previous']) ||
-                    metadata.previous_title ||
-                    'Previous'}
+                  <span className="arrow-prev">← </span>
+                  <span
+                    className={
+                      previousTitle.match(/[a-z][A-Z]/) &&
+                      'function-name-prevnext'
+                    }>
+                    {previousTitle}
+                  </span>
                 </a>
               )}
               {metadata.next_id && (
@@ -92,11 +107,13 @@ class DocsLayout extends React.Component {
                     metadata.localized_id,
                     metadata.next_id
                   )}>
-                  {idx(i18n, ['localized-strings', metadata.next_id]) ||
-                    idx(i18n, ['localized-strings', 'next']) ||
-                    metadata.next_title ||
-                    'Next'}{' '}
-                  →
+                  <span
+                    className={
+                      nextTitle.match(/[a-z][A-Z]/) && 'function-name-prevnext'
+                    }>
+                    {nextTitle}
+                  </span>
+                  <span className="arrow-next"> →</span>
                 </a>
               )}
             </div>
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index 322673ebd2af..a8ba446c4672 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1545,8 +1545,32 @@ input::placeholder {
 }
 
 @media only screen and (max-width: 735px) {
-  .docs-prevnext {
-    height: 40px;
+  .docs-next {
+    clear: both;
+    float: left;
+    margin: 10px 0;
+  }
+
+  .docs-prev {
+    margin: 10px 0;
+  }
+
+  .arrow-next {
+    float: right;
+    margin-left: 10px;
+  }
+
+  .arrow-prev {
+    float: left;
+    margin-right: 10px;
+  }
+
+  .function-name-prevnext {
+    width: 200px;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 /* End of Docs Navigation */
diff --git a/package-lock.json b/package-lock.json
index d25b95f6d9ff..b40ddff938e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3094,6 +3094,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.2.tgz",
       "integrity": "sha1-nO1l6gvAsJ9CptecGxkD+dkTzBg="
     },
+    "deepmerge": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.1.1.tgz",
+      "integrity": "sha512-urQxA1smbLZ2cBbXbaYObM1dJ82aJ2H57A1C/Kklfh/ZN1bgH4G/n5KWhdNfOK11W98gqZfyYj7W4frJJRwA2w=="
+    },
     "default-require-extensions": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-2.0.0.tgz",