Wordpress & Enquire.js - conditional loading philosophy

Wordpress & Enquire.js - conditional loading philosophy

Is not a matter of code, I just don't get the idea of how things works in
this specific case.
I'm woking on a Wordpress theme which should dynamically load portions of
php code through javascript.
If the screen is < 1080px the mobile version menu of my Wordpress
theme should be shown.
A solution based just on media queries is not acceptable since the desktop
version is too heavy.
So I decided to conditional dynamically load content through enquire.js
The first line of my code is this
enquire.register("screen and (max-width:1080px)", {
<script type="text/javascript">
// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {
document.write("Hello World!");
$("body").load(
"http://XXX.YY/wp-content/themes/MyTheme/templates/headernav-phone.php"
);
}
When the size of the screen hits 1080px, Wordpress pops up with this error
message:
Fatal error: Call to undefined function wp_nav_menu() in
/XX/YYY/ZZZ/webseiten/XXX.YY/wp-content/themes/MyTheme/templates/headernav-phone.php
on line 14
It looks like that my code is run before the CMS, and it breaks its own
functions. At the moment, it doesn't make any sense to me