WordPress menu is placed outside the header

If the user goes to a page other than the homepage then my header changes layout.

Everything works fine except for the function wp_nav_menu.

First, I check whether the user is on the homepage or not. Depending on that outcome the user is shown one of two headers.

Here is the code:

<?php 
    $menu = wp_nav_menu( array( 'theme_location' => 'hoofdmenu' ) );
    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>
            '.$menu.'
        </div>
    </header>';
?>

To keep it short I deleted the true value of the if statement.

Now the problem that I have is that the menu is placed completely outside the header

Here is the HTML output:

<div class="menu-hoofdmenu-container">
    <ul id="menu-hoofdmenu" class="menu">
        <li>Menu item 1</li>
        <li>Menu item 2</li>
        <li>Menu item 3</li>
    </ul>
</div>      
    <header>
        <div class="hoofdmenu">
            <div class="hamburger">
                <a href="#" id="click-a"><img width="80" height="80" src="http://www.url.nl/wp-content/themes/themename/images/hamburger.png"></a>
                </div>
            </div>
        </div>
    </header>

Any thoughts on why the wp_nav_menu is placed outside the header?

-------Update--------

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>

(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) );