Super Easy Vanishing Admin Toolbar for Drupal 8

The D8 toolbar is great, but often gets in the way of layouts that also have fixed/static headers. I just whipped up a very quick solution to how to hide the Drupal (D8) admin toolbar. It works well enough for the project I'm working on right now; maybe you can do something similar that suits your needs.

1. Create a template override

Add a toolbar.html.twig template file in your theme. It just adds one element to the existing markup: the #toolbar-toggle item that becomes clickable thanks to some jQuery (below). (This example relies on FontAwesome to render the clickable toggle item.)

<div{{ attributes.addClass('toolbar') }}>
  <nav{{ toolbar_attributes.addClass('toolbar-bar', 'clearfix') }}>
    <div id="toolbar-toggle" class="closed"><i class="fas fa-plus-square"></i></div>
    <h2 class="visually-hidden">{{ toolbar_heading }}</h2>
    {% for key, tab in tabs %}
      {% set tray = trays[key] %}
      <div{{ tab.attributes.addClass('toolbar-tab') }}>
        {{ tab.link }}
        {% spaceless %}
          <div{{ tray.attributes }}>
            {% if tray.label %}
              <nav class="toolbar-lining clearfix" role="navigation" aria-label="{{ tray.label }}">
                <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
            {% else %}
              <nav class="toolbar-lining clearfix" role="navigation">
            {% endif %}
            {{ tray.links }}
            </nav>
          </div>
        {% endspaceless %}
      </div>
    {% endfor %}
  </nav>
  {{ remainder }}
</div>

2. Styling

Hide and float the relevant stuff with just a few lines of CSS:

#toolbar-toggle {
  float: left;
  font-size: 1rem;
  background: black;
  padding: 9px;
}

#toolbar-bar { 
  background: transparent; 
  box-shadow: none; 
}

#toolbar-bar .toolbar-tab { 
  display: none;
}

3. jQuery

Load up some very simple JS via a module or theme.

  if ($('#toolbar-toggle').length) {
    $('#toolbar-toggle').click(function(){
      if ($(this).hasClass('closed')) {
        $(this).removeClass('closed');
        $('i', this).removeClass('fa-plus-square').addClass('fa-minus-square');
        $('#toolbar-bar').css('background', 'rgba(0,0,0,.9)');
        $('#toolbar-bar .toolbar-tab').show('slow');
      }
      else {
        $(this).addClass('closed');
        $('i', this).removeClass('fa-minus-square').addClass('fa-plus-square');
        $('#toolbar-bar').css('background', '');
        $('#toolbar-bar .toolbar-tab').hide('slow');
      }
    });
  }

And that's it! The menu is now hidden by default, but it can be dynamically shown and hidden as required.