2

I am working on a responsive design for a site I am building and I currently am having trouble including the menu twice in the header template file. I need the menu displayed inside the content wrapper for large devices and outside the template wrapper on small devices so I intende to use bootstrap classes to show/hide the correct menus. However when I include the menu twice in my template file only the second instance is ever displayed. How can I get the menu to render twice in the same template.

<div class="region region-header">
<div class="hamburger-menu hidden-md hidden-lg">
    <span class="hamburger-btn"></span>
    <?php print render($main_menu); ?>
</div>
<div class="logo-wrapper">
    <?php print render($content); ?>
    <?php print render($main_menu); ?>
</div>
</div>
1

You can probably use the show() function to un-hide the previously rendered element:

<div class="region region-header">
<div class="hamburger-menu hidden-md hidden-lg">
    <span class="hamburger-btn"></span>
    <?php print render($main_menu); ?>
</div>
<div class="logo-wrapper">
    <?php print render($content); ?>
    <?php show($main_menu); ?>
    <?php print render($main_menu); ?>
</div>
</div>
  • This didn't change anything, the menu is still only displayed where the last call to render it is made. – Eric Farley Jan 5 '15 at 20:01
  • Sorry I missed that first time round. It doesn't really make sense that the 1st one fails to render and the 2nd doesn't, have you checked the page markup to confirm the menu isn't rendered? – Clive Jan 5 '15 at 20:04
  • I just discovered that the menu was being displayed because I had main menu included in the header block, removing that from the block removed the menu. I'm currently trying to figure out how to include the main menu in the header region template region--header.tpl.php or maybe structure the header differently. – Eric Farley Jan 5 '15 at 21:18
0

I was mistaken where the menu was being rendered from. I had the main_menu block included in the header region and so it was being rendered in my header. Once I removed the main menu from the header region the menu was not displayed at all. To display the menu twice in the header region I created a new region for the menu named menu, I assigned the main menu block to that region, and then in my template.php file I store the content of that region as a variable.

function theme_preprocess_region(&$variables){
    $variables['menu_block'] = block_get_blocks_by_region('menu');
}

I can then use the variable $variables['menu_block'] to nest my menu region inside my header region (region--header.tpl.php) wherever I need.

<div class="hamburger-menu hidden-md hidden-lg">
    <span class="hamburger-btn"></span>
    <?php print render($variables['menu_block']); ?>
</div>
<div class="logo-wrapper">
    <?php print render($content); ?>
    <?php print render($variables['menu_block']); ?>
</div>
0

Store the rendered main menu in a variable and then output it twice.

Sounds like the easiest solution unless there are considerations I'm not aware of.

Cheers.

<?php $rendered_main_menu = render($main_menu); ?>
<div class="region region-header">
<div class="hamburger-menu hidden-md hidden-lg">
    <span class="hamburger-btn"></span>
    <?php print $rendered_main_menu; ?>
</div>
<div class="logo-wrapper">
    <?php print render($content); ?>
    <?php print $rendered_main_menu; ?>
</div>
</div>
0

An alternative answer:

Personally I would say only print the menu once as bootstrap does. This way you don't have the extra markup. If you look at the way Bootstrap has the menu setup you will see what I am referring to there. They target showing the original menu and not a copy of the original menu. You can then restyle their implementation to achieve the same goal as you are needing.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.