diff --git a/assets/html/documenter.css b/assets/html/documenter.css
index ca66e74bf62..175416ff28e 100644
--- a/assets/html/documenter.css
+++ b/assets/html/documenter.css
@@ -135,10 +135,6 @@ nav.toc {
     box-shadow: inset -14px 0px 5px -12px rgb(210,210,210);
 }
 
-nav.toc.off {
-    display: none;
-}
-
 nav.toc .logo {
     margin: 0 auto;
     display: block;
@@ -241,6 +237,10 @@ nav.toc li.current > .toctext {
     background-color: white;
 }
 
+div.topbar {
+    display: none;
+}
+
 article {
     margin-left: 20em;
     min-width: 20em;
@@ -262,24 +262,15 @@ article > header nav li {
     padding-right: 0.2em;
 }
 
-article > header nav ul.float-left li:before {
+article > header nav li:before {
     content: "»";
     padding-right: 0.2em;
 }
 
-article > header nav ul.float-right {
+article > header .edit-page {
     float: right;
 }
 
-article > header nav ul.float-right a.btn {
-    display: none;
-}
-
-article > header nav ul.float-right i.fa-bars {
-    text-align: center;
-    width: 3em;
-}
-
 article > footer {}
 
 article > footer a.prev {
@@ -415,16 +406,100 @@ article section.docstring a.source-link {
     padding: 0;
 }
 
-@media only screen and (min-width: 320px) and (max-width: 768px) {
+@media only screen and (max-width: 768px) {
+    div.topbar {
+        display: block; /* is mobile */
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        right: 0px;
+        height: 2.5em;
+        overflow: hidden;
+        background-color: white;
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
+                    0 1px 5px 0 rgba(0,0,0,.12),
+                    0 3px 1px -2px rgba(0,0,0,.2);
+        z-index: 1;
+    }
+
+    div.topbar div.container {
+        height: 100%;
+        width: 100vw;
+    }
+
+    div.topbar ul {
+        font-weight: bold;
+        line-height: 2.5em;
+        list-style: none;
+    }
+
+    div.topbar ul.float-left {
+        float: left;
+        font-size: smaller;
+        width: 60%;
+        padding-left: 1em;
+        margin-top: 0.3em;
+    }
+
+    div.topbar ul.float-left li {
+        white-space: nowrap;
+        display: inline-block;
+    }
+
+    div.topbar ul.float-right {
+        float: right;
+        padding: 0 0 0 0;
+        margin-top: 0.1em;
+    }
+
+    div.topbar ul.float-right i.fa-bars {
+        width: 1em;
+        padding-left: 0.5em;
+        padding-right: 0.5em;
+        text-align: right;
+        font-size: x-large;
+        background-color: white;
+    }
+
+    div.main div.container {
+        margin-top: 1em;
+    }
+
     nav.toc {
-        position: relative;
+        position: fixed;
+        overflow-y: scroll;
+        z-index: 2;
+        width: 80%;
+        left: -768px;
+        -webkit-transition-property: left; /* Safari */
+        -webkit-transition-duration: 0.3s; /* Safari */
+        -webkit-transition-timing-function: ease-in; /* Safari */
+        transition-property: left;
+        transition-duration: 0.3s;
+        transition-timing-function: ease-in;
+    }
+
+    nav.toc.show {
+        left: 0rem;
+        -webkit-transition-property: left; /* Safari */
+        -webkit-transition-duration: 0.3s; /* Safari */
+        -webkit-transition-timing-function: ease-out; /* Safari */
+        transition-property: left;
+        transition-duration: 0.3s;
+        transition-timing-function: ease-out;
     }
 
     article {
-        margin-left: 0em;
+        padding-top: -3em;
+        padding-left: 0.9em;
+        padding-right: 0.9em;
+        margin-left: 0;
     }
 
-    article ul.float-right a.btn {
-        display: block !important;
+    article [id]:before {
+        display: inline-block;
+        content: "";
+        padding-top: 5em;
+        margin-top: -5em;
     }
 }
diff --git a/assets/html/documenter.js b/assets/html/documenter.js
index cc549a28833..3e27dc085c7 100644
--- a/assets/html/documenter.js
+++ b/assets/html/documenter.js
@@ -61,12 +61,20 @@ require(['jquery', 'highlight', 'highlight-julia'], function($, hljs) {
         }
         hljs.initHighlighting();
 
-        if ($("nav.toc").css('position') == 'relative') {
-            $("nav.toc").toggleClass('off')
+        // mobile
+        if ($("div.topbar").css('display') == 'block') {
+            var navtoc = $("nav.toc");
+            var navtoc_current_top = $('nav.toc li.current').offset().top;
+            $("nav.toc li.current a.toctext").click(function(ev) {
+                navtoc.toggleClass('show');
+            });
+            $("div.topbar ul.float-right a.btn").click(function() {
+                navtoc.toggleClass('show');
+                if (navtoc.hasClass('show')) {
+                    navtoc.animate({scrollTop: navtoc_current_top}, 0);
+                }
+            });
         }
-        $("article ul.float-right a.btn").click(function() {
-            $("nav.toc").toggleClass('off')
-        });
     })
 
 })
diff --git a/src/Writers/HTMLWriter.jl b/src/Writers/HTMLWriter.jl
index 31166ef5a72..3a2b36d3e2e 100644
--- a/src/Writers/HTMLWriter.jl
+++ b/src/Writers/HTMLWriter.jl
@@ -148,18 +148,19 @@ end
 Constructs and writes the page referred to by the `navnode` to `.build`.
 """
 function render_page(ctx, navnode)
-    @tags html body
+    @tags html body div
 
     page = getpage(ctx, navnode)
 
     head = render_head(ctx, navnode)
+    topbar = render_topbar(ctx, navnode)
     navmenu = render_navmenu(ctx, navnode)
     article = render_article(ctx, navnode)
 
     htmldoc = DOM.HTMLDocument(
         html[:lang=>"en"](
             head,
-            body(navmenu, article)
+            body(topbar, div[".main"](div[".container"](navmenu, article)))
         )
     )
     open(Formats.extension(:html, page.build), "w") do io
@@ -262,6 +263,20 @@ function render_search(ctx)
     end
 end
 
+
+# topbar for mobile
+# ------------------------------------------------------------------------------
+
+function render_topbar(ctx, navnode)
+    @tags div ul li span a i
+
+    page_title = string(mdflatten(pagetitle(ctx, navnode)))
+    topbarleft = ul[".float-left"](li(span(page_title)))
+    topbarright = ul[".float-right"](li(a[".btn", :href => "#"](i[".fa .fa-bars", Symbol("aria-hidden") => "true"])))
+    div[".topbar"](div[".container"](topbarleft, topbarright))
+end
+
+
 # Navigation menu
 # ------------------------------------------------------------------------------
 
@@ -360,20 +375,18 @@ end
 # ------------------------------------------------------------------------------
 
 function render_article(ctx, navnode)
-    @tags article header footer nav ul li hr span a i
+    @tags article header footer nav ul li hr span a
 
     header_links = map(Documents.navpath(navnode)) do nn
         title = mdconvert(pagetitle(ctx, nn))
         isnull(nn.page) ? li(title) : li(a[:href => navhref(nn, navnode)](title))
     end
 
-    topnavleft = ul[".float-left"](header_links)
-    topnavright = ul[".float-right"]
+    topnav = nav(ul(header_links))
     Utilities.unwrap(Utilities.url(ctx.doc.user.repo, getpage(ctx, navnode).source)) do url
-        push!(topnavright.nodes, li(a[".edit-page", :href => url](span[".fa"]("\uf09b"), " Edit on GitHub")))
+        push!(topnav.nodes, a[".edit-page", :href => url](span[".fa"]("\uf09b"), " Edit on GitHub"))
     end
-    push!(topnavright.nodes, li(a[".btn", :href => "#"](i[".fa .fa-bars", Symbol("aria-hidden") => "true"])))
-    art_header = header(nav(topnavleft, topnavright), hr())
+    art_header = header(topnav, hr())
 
     # build the footer with nav links
     art_footer = footer(hr())