diff --git a/docs/Makefile.am b/docs/Makefile.am
index d04b2d5c6f..8a201882c5 100644
--- a/docs/Makefile.am
+++ b/docs/Makefile.am
@@ -52,6 +52,7 @@ devhelphtml =			\
 css =         \
   generic.css \
   libvirt.css \
+  mobile.css \
   main.css
 
 fonts = \
diff --git a/docs/main.css b/docs/main.css
index 95d5d325d7..71f7b7a6a0 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -1,3 +1,4 @@
 @import url(fonts/stylesheet.css);
 @import url(generic.css);
 @import url(libvirt.css);
+@import url(mobile.css);
diff --git a/docs/mobile.css b/docs/mobile.css
new file mode 100644
index 0000000000..85ca497525
--- /dev/null
+++ b/docs/mobile.css
@@ -0,0 +1,94 @@
+@media (max-width: 1000px) {
+    #home {
+	width: 100%;
+	display: block;
+	margin: 0px;
+	background: white url(logos/logo-banner-dark-256.png) no-repeat center center;
+	height: 94px;
+    }
+    #home a {
+	width: 100%;
+    }
+    #search {
+	width: 100%;
+	display: block;
+	margin: 0px;
+	background: white;
+	padding: 0px;
+    }
+    #search form {
+	padding: 5px;
+    }
+    body.index h1 {
+	display: none;
+    }
+    #jumplinks {
+	padding: 0px;
+	display: block;
+	width: 100%;
+	text-align: center;
+	margin: 0px;
+	height: 1.3em;
+	font-size: 1em;
+	border-top: 3px solid rgb(60, 133, 124);
+	border-bottom: 3px solid rgb(60, 133, 124);
+    }
+    #jumplinks ul {
+	display: block;
+	padding: 0px;
+	margin: 0px;
+    }
+    #jumplinks li {
+	margin: 0px;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+    }
+    #nav {
+	border: 0px;
+    }
+
+    #search.navhide {
+	display: none !IMPORTANT;
+    }
+    #home.navhide {
+	position: fixed;
+	top: 0px;
+	z-index: 9001;
+	width: 6em;
+	display: block;
+	margin: 0px;
+	background: inherit;
+	height: 1.3em;
+	border-top: 3px solid rgb(60, 133, 124);
+	border-bottom: 3px solid rgb(60, 133, 124);
+	font-size: 1em;
+	text-indent: 0px;
+	font-weight: bold;
+	padding-left: 1em;
+    }
+    #home.navhide a {
+	color: white;
+	text-decoration: none;
+    }
+    #home.navhide a:hover {
+	color: rgb(255, 230, 0);
+    }
+    #jumplinks.navhide {
+	position: fixed;
+	text-align: right;
+	top: 0px;
+	z-index: 9000;
+	background: rgb(0, 95, 97);
+    }
+    #jumplinks.navhide ul {
+	z-index: 9001;
+    }
+    #body {
+	margin-top: 180px;
+    }
+    div.panel {
+	width: 80%;
+	float: none;
+	margin-bottom: 2em;
+    }
+}
diff --git a/docs/page.xsl b/docs/page.xsl
index 7ca4e7bf4f..3a64a06c51 100644
--- a/docs/page.xsl
+++ b/docs/page.xsl
@@ -88,6 +88,7 @@
       </xsl:comment>
       <head>
         <meta charset="UTF-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
         <link rel="stylesheet" type="text/css" href="{$href_base}main.css"/>
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
@@ -97,6 +98,39 @@
         <title>libvirt: <xsl:value-of select="html:html/html:body/html:h1"/></title>
         <meta name="description" content="libvirt, virtualization, virtualization API"/>
         <xsl:apply-templates select="/html:html/html:head/*" mode="content"/>
+
+        <script type="text/javascript">
+          <xsl:comment>
+          <![CDATA[
+      function init() {
+      window.addEventListener('scroll', function(e){
+              var distanceY = window.pageYOffset || document.documentElement.scrollTop,
+              shrinkOn = 94
+              home = document.getElementById("home");
+              links = document.getElementById("jumplinks");
+              search = document.getElementById("search");
+              body = document.getElementById("body");
+              if (distanceY > shrinkOn) {
+                  if (home.className != "navhide") {
+                      body.className = "navhide"
+                      home.className = "navhide"
+                      links.className = "navhide"
+                      search.className = "navhide"
+                  }
+              } else {
+                  if (home.className == "navhide") {
+                      body.className = ""
+                      home.className = ""
+                      links.className = ""
+                      search.className = ""
+                  }
+              }
+      });
+      }
+      window.onload = init();
+           ]]>
+          </xsl:comment>
+        </script>
       </head>
       <body>
         <xsl:if test="html:html/html:body/@class">
@@ -117,7 +151,7 @@
             <ul>
               <li><a href="{$href_base}downloads.html">Download</a></li>
               <li><a href="{$href_base}contribute.html">Contribute</a></li>
-              <li><a href="{$href_base}docs.html">Learn</a></li>
+              <li><a href="{$href_base}docs.html">Docs</a></li>
             </ul>
           </div>
           <div id="search">
