Jump to content

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

Recommended Posts

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. 

 

 

 

Edited by Vinoth
Confusing title.
Link to comment
  • Vinoth changed the title to On both desktops and mobile devices, how can a header navigation menu be made to function independently?
  • Replies 1
  • Views 230
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.