load wp_menu dynamically with enquire.js

Question

I'm trying to dynamically load the wp_menu with enquire.js but it just doesn't work. If the screen is < 1080px the wp_menu(mobile) should be loaded, otherwise the wp_menu(desktop).

In my homepage-template.php I regularly call the header and then I use enquire.js as per instructions.

<script type="text/javascript">
enquire.register("screen and (max-width:1080px)", {

// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {
    $("body").load(
      "http://dev.andreapuiatti.com/dev4/wp-content/themes/spk/templates/headernav-phone.php"
    );
    document.write('meno di 1080px<br/>');
},

// OPTIONAL
// If supplied, triggered when the media query transitions
// *from a matched state to an unmatched state*.
unmatch : function() {
    $("body").load(
      "http://dev.andreapuiatti.com/dev4/wp-content/themes/spk/templates/headernav-computer.php"
    );
    document.write('OLTRE i 1080px<br/>');
},

// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},

// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function
// until the first time the media query is matched
deferSetup : true,

// OPTIONAL
// If supplied, triggered when handler is unregistered.
// Place cleanup code here
destroy : function() {}

});
</script>

Enquire works, but Wordpress doesn't and kicks out this error message:

Fatal error: Call to undefined function wp_nav_menu() in /kunden/372333_10437/webseiten/dev.andreapuiatti.com/dev4/wp-content/themes/spk/templates/headernav-computer.php on line 20

Any Idea on how to dynamically load that menu?

follows the content of headernav-computer.php:

<?php wp_nav_menu( array('link_after' => '<div class="one"></div>', 'menu' => 'primary', 'container_class' => 'menu') ); ?>