D8 theme hamburger menu (legacy)

By admin, 18 August, 2017

see https://jimbir.ch/blog/bootstrap-navbar-drupal-8-4-easy-template-changes

Go to =  breeze

menu goes in naviation region - print navigation region in page.html.twig

menu will drop down in navigation region - but you can position the hamburger eg in top right with position: fixed 

may need two menus and display none ie mobile / laptop 

https://www.drupal.org/project/responsive_menuĀ 8.x-2.6 - 13 January 2018


Bartik - yes (Main navigation needs to be in primary menu region)

Bootstrap - yes Main navigation needs to be in Navigation (Collapsible) reigon

Breeze (sub theme of Bootstrap) - yes menu needs to be in ??? ??

Bartik just needs {{ page.primary_menu }} in page template - hamburger toggle comes from bartik/templates/block--system-menu-block.html.twig




menu needs to be in the relevant region - in Bartik this is Primary menu, in Bootstrap this is Navigation (Collapsible) - and then printed in page template


otherwise something will not work eg menu items will be on display / not hidden

button" class="navbar-toggle" in bootstrap's page.html.twig


Bartik hide main navigation


NB menu needs to be in 100% width region ?? otherwise menu in eg 50% region would look like this  

Bartik has Show - Main Menu and Hide - Main Menu - comes from Bartik/templates/block--system-menu-block.html.twig

- so delete this in template



ideally should look like this - menu link on right but dropdown links at 100% width


position absolute / width 100% media query for phone ??




bartik & breeze - once hamburger is clicked menu remains dropped down - until hamburger is clicked again

better would be if hamburger changed to X to indicate closure

or if menu closed after clicking ie who wants t to remain open??



{# end nav wrapper #}

  • helloim
  • testy
  • admin