WordPress menu is placed outside the header WordPress menu is placed outside the header wordpress wordpress

WordPress menu is placed outside the header


(Added an update at the bottom of the answer, you can skip the first part)

According to the Docs, the function displays (echo) the menu and doesn't return it.

wp_nav_menu( array $args = array() )

Displays a navigation menu.

Therefore, when you use

$menu = wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) );

You actually print the menu rather than saving it in the $menu variable and therefore it's being printed prior to the header's code.

The solution would be:

echo is_front_page() ? '' : '<header>    <div class="hoofdmenu">        <div class="hamburger">            <a href="#" id="click-a"><img width="80" height="80" src="'.get_bloginfo('template_directory').'/images/hamburger.png"></a>        </div>        '.wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) ).'    </div></header>';

UPDATE:

Try the following:

if(!is_front_page()){    echo '<header>        <div class="hoofdmenu">            <div class="hamburger">                <a href="#" id="click-a"><img width="80" height="80" src="'.get_bloginfo('template_directory').'/images/hamburger.png"></a>            </div>';            wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) );    echo '        </div>    </header>';}

Better update:

Use the same code you were using, just add the 'echo' option to the args array.It seems that you can tell the function to return the output instead of printing it.

'echo' (bool) Whether to echo the menu or return it. Default true.

Usage:

$menu = wp_nav_menu( array( 'theme_location' => 'hoofdmenu', 'echo' => false) );


Simple solution. Give echo false and your code will work.From WP Docs.

//'echo'//(bool) Whether to echo the menu or return it. Default true.$menu = wp_nav_menu( array( 'theme_location' => 'hoofdmenu', 'echo' => false ) );