At the moment I know two ways of presenting a navigation menu on Backdrop powered website:

1. Primary navigation block. In mobile version it is replaced by "hamburger" button and dropdown menu.

2. Header block if Menu option is set to Primary navigation. No mobile version is provided for it.

I wonder how can I add a mobile menu into the Header block?

It looks like it doesn't depend on active theme. I checked this by setting a blank empty theme and Primary navigation mobile menu still works. So I assume this is provided by the Backdrop core. I would be grateful if someone can share how the mobile menu works and how it can be used for custom themes/modules.

Comments

Hi @korontari

I use bootstrap lite and the mobile menu does work in the header block.

Not sure why it wouldn't be working

Hi @yorkshirepudding,

Yes, indeed, bootsrap implements mobile menu in the header block.

But my intention is to build my own theme where I could have mobile menu in the header block. For primary navigation block the mobile menu is provided by Backdrop core as I guess. So I wonder how could I implement a mobile menu for the header block in my theme using same script/recourses as those used in primary navigation block?

I found that I can get prerendered(?) menu from system_menu_block_build() and assign output to the $menu variable in header preprocess function. 

function HOOK_preprocess_header(&$variables) {
  $config = array(
    'level' => 1,
    'menu_name' => $menu_name,
    'style' => 'top-only',
    'expand_all' => FALSE,
    'clickdown' => 0,
    'depth' => 0,
    'toggle' => 1,
  );

  $data = system_menu_block_build($config);
  $variables['menu'] = backdrop_render($data['content']);
}