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.

Add new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.