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.