Jump to content

How to force Mobile Site Header Menu navigation links to point to different page links than the Desktop Site Header navigation links?

Go to solution Solved by tuanphan,

Recommended Posts

I'm realizing that designing for both mobile and desktop on each page is becoming too complicated (for my case, on this specific site with thousands of images). 


I'm currently doing the trick where you use "@media screen and (max-width: 750px)" and "@media screen and (min-width: 750px)" to hide sections.  

I have thousands of images however and each pages' Page Settings Advanced code section is becoming a mess. It's coming back in to test and edit code is taking way too long to sift through. 


I'm thinking that I would now like for users visit my splash page (which only has one link to take them into the site) and  if they are on mobile they can only see a link (using the code above) that sends them to my site main pages that is specifically designed for mobile and if they are on desktop, they can only see a link that takes them to my site that is designed for desktop. 

For pages with my site footer (that has links), if the user is on mobile they will only see text blocks that send them to mobile pages and vice verse. 

The big problem is the site HEADER navigation links though! 

Right now, if I technically make two pages (mobile and desktop) for each page of my site and drag them into the Main Navigation of the site, all of the versions (desktop and mobile) of the page will show up in both the mobile and desktop menus. 

What can I do to make it to where only links designed for mobile are seen on the mobile header menu and only links designed for desktop are seen in the desktop header? 







Link to comment
  • 3 weeks later...

Thank you so much, Taun! 

I decided to use another solution you posted on here where instead of having sections for mobile and desktop on one page, I broke them up and put them designated pages and used this code you posted to redirect ... 

<script type="text/javascript">
if (screen.width <= 1000) {
document.location = "https://www.mamiecreative.com/fashion-lifestyle-mobile";

You rock! Don't know what we'd do without you. 

Link to comment

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.