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.