Collapse the toolbar on small screen in responsive theme


This snippet ties the visibility of the toolbar menu to the toggle for the shortcuts bar. When collapsed, all you see is the home icon, your name, and the shortcut toggle. An easy way to keep the toolbar from taking up half your screen if you're in a responsive theme.

Get raw version
  1. /* Add to an appropriate place in your theme, in my case core-overrides.css */
  2. @media screen and (max-width: 767px) {
  3. /* Link the showing of the toolbar to the shortcut bar toggle */
  4. .js #toolbar-menu {
  5. display: none;
  6. }
  8. .toolbar-drawer #toolbar-menu {
  9. display: block;
  10. }
  11. }