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

bartik-hamburger.jpg

bartik-page-template-regions.jpg

bootstrap-hamburger.jpg

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

menu-block.jpg

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

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

bootstrap-page-template.jpg

Bartik hide main navigation

bartik-block-template.jpg

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

bartik-menu-template_0.jpg

bartik-menu_0.jpg

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

drupalize-me.jpg

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??

https://www.drupal.org/project/cheeseburger_menu

breeze

{# end nav wrapper #}

Tax
  • helloim
  • testy
  • admin