diff --git a/hledger-web/Handler/Common.hs b/hledger-web/Handler/Common.hs
index b4ea2bad5..688fcb312 100644
--- a/hledger-web/Handler/Common.hs
+++ b/hledger-web/Handler/Common.hs
@@ -46,7 +46,7 @@ hledgerLayout vd title content = do
 -- | Global toolbar/heading area.
 topbar :: ViewData -> HtmlUrl AppRoute
 topbar VD{..} = [hamlet|
-<div#spacer .col-md-4 .col-sm-4 .col-xs-2>
+<div#spacer .#{showsm} .#{showmd} .col-xs-2>
  <h1>
   <button .visible-xs .btn .btn-default type="button" data-toggle="offcanvas">
    <span .glyphicon .glyphicon-align-left .tgl-icon>
@@ -56,6 +56,8 @@ topbar VD{..} = [hamlet|
 |]
   where
     title = takeFileName $ journalFilePath j
+    showmd = if showsidebar then "col-md-4" else "col-any-0" :: String
+    showsm = if showsidebar then "col-sm-4" else "" :: String
 
 -- | The sidebar used on most views.
 sidebar :: ViewData -> HtmlUrl AppRoute
diff --git a/hledger-web/static/hledger.js b/hledger-web/static/hledger.js
index f9b5be587..4d2e28402 100644
--- a/hledger-web/static/hledger.js
+++ b/hledger-web/static/hledger.js
@@ -223,6 +223,7 @@ function addformDeletePosting() {
 function sidebarToggle() {
   $('#sidebar-menu').toggleClass('col-md-4 col-sm-4 col-any-0');
   $('#main-content').toggleClass('col-md-8 col-sm-8 col-md-12 col-sm-12');
+  $('#spacer').toggleClass('col-md-4 col-sm-4 col-any-0');
   $.cookie('showsidebar', $('#sidebar-menu').hasClass('col-any-0') ? '0' : '1');
 }