On both desktops and mobile devices, how can a header navigation menu be made to function independently?

Site URL: https://www.ourfamilydoc.us/

Hi, 

I created a site for a client and on desktop it looks great. It's a simple one page with sections and couple of informational pages with contact sheet. To avoid the hassle of resizing and hiding blocks, I duplicated the entire website, formatted to fit mobile and added a script to fetch the duplicated and formatted mobile version to display if viewed from a mobile device. 

The code to display the website accessed by mobile device.

<script type="text/javascript">
if (screen.width <= 767) {
document.location = "/mobile";
}
</script>

<meta name="robots" content="noindex" />

So far all works except for the NAVIGATIONAL MENU. The hero/landing page on desktop has couple of anchor links and couple of links leading to individual pages. The links themselves works fine on desktop however on mobile none of works. I think this is due to the document location path accessed over mobile is under the slug "/mobile".

To simply illustrate my situation, how can I solve this so that when a user clicks "Contact"' page link it leads them to the contact page be in on desktop or mobile? Or better yet, how can I individually link each page's navigation accordingly as in one header navigation for the desktop set and another navigation set if accessed from mobile? How can I fix this?

Thanks in advance. 

Hi,

I don't see anchor links on header. Can you add one? We can check problem easier