diff --git a/hledger-web/Handler/Common.hs b/hledger-web/Handler/Common.hs
index 186a4d645..8af54e6cc 100644
--- a/hledger-web/Handler/Common.hs
+++ b/hledger-web/Handler/Common.hs
@@ -44,8 +44,10 @@ hledgerLayout vd title content = do
 -- | Global toolbar/heading area.
 topbar :: ViewData -> HtmlUrl AppRoute
 topbar VD{..} = [hamlet|
-<div#spacer .col-md-4 .hidden-xs .hidden-sm>
-<div#topbar .col-md-8 .col-sm-12 .col-xs-12>
+<div#spacer .col-md-4 .col-sm-2 .col-xs-2>
+ <p .visible-xs .visible-sm>
+  <button .btn .btn-default type="button" data-toggle="offcanvas"><span class="glyphicon glyphicon-align-left">
+<div#topbar .col-md-8 .col-sm-10 .col-xs-10>
  <h1>#{title}
 |]
   where
@@ -55,7 +57,7 @@ topbar VD{..} = [hamlet|
 sidebar :: ViewData -> HtmlUrl AppRoute
 sidebar vd@VD{..} =
  [hamlet|
- <div #sidebar-menu .col-md-4 .hidden-xs .hidden-sm>
+ <div #sidebar-menu .col-md-4 .sidebar-offcanvas>
   <ul .main-menu .nav .nav-stacked .affix-top>
    <li .top>
     <a href=@{JournalR} title="Show general journal entries, most recent first">Journal
diff --git a/hledger-web/static/hledger.css b/hledger-web/static/hledger.css
index a39a24d08..77bb9280e 100644
--- a/hledger-web/static/hledger.css
+++ b/hledger-web/static/hledger.css
@@ -177,3 +177,44 @@ ul {
     width:0 !important;
     float: left;
 }
+
+@media screen and (max-width: 992px) {
+    .row-offcanvas {
+        position: relative;
+        -webkit-transition: all .25s ease-out;
+        -o-transition: all .25s ease-out;
+        transition: all .25s ease-out;
+    }
+
+    .row-offcanvas-right {
+        right: 0;
+    }
+
+    .row-offcanvas-left {
+        left: 0;
+    }
+
+    .row-offcanvas-right
+    .sidebar-offcanvas {
+        right: -90%; /* 4 columns */
+    }
+
+    .row-offcanvas-left
+    .sidebar-offcanvas {
+        left: -90%; /* 6 columns */
+    }
+
+    .row-offcanvas-right.active {
+        right: 90%; /* 6 columns */
+    }
+
+    .row-offcanvas-left.active {
+        left: 90%; /* 6 columns */
+    }
+
+    .sidebar-offcanvas {
+        position: absolute;
+        top: 0;
+        width: 90%; /* 6 columns */
+    }
+}
diff --git a/hledger-web/static/hledger.js b/hledger-web/static/hledger.js
index fc04b842d..69c380c98 100644
--- a/hledger-web/static/hledger.js
+++ b/hledger-web/static/hledger.js
@@ -41,6 +41,9 @@ $(document).ready(function() {
     $('.highlighted').removeClass('highlighted');
     $(window.location.hash).addClass('highlighted');
   });
+  $('[data-toggle="offcanvas"]').click(function () {
+      $('.row-offcanvas').toggleClass('active');
+  });
 });
 
 //----------------------------------------------------------------------
diff --git a/hledger-web/templates/default-layout-wrapper.hamlet b/hledger-web/templates/default-layout-wrapper.hamlet
index ca4aff393..bdad0ad1a 100644
--- a/hledger-web/templates/default-layout-wrapper.hamlet
+++ b/hledger-web/templates/default-layout-wrapper.hamlet
@@ -25,8 +25,9 @@ $newline never
           document.hledgerWebBaseurl = '#{base_url_ opts}'; // save for binding keys later
 
     <body>
-        <div class="container">
-            ^{pageBody pc}
+        <div .container>
+            <div .row .row-offcanvas .row-offcanvas-left>
+              ^{pageBody pc}
             <footer>
                 #{extraCopyright $ appExtra $ settings master}
 
