Jump to content

Redirecting navigation menu on Mobile

Recommended Posts

Site URL: https://www.sabustudio.com

Hi,

 

I have set up my navigation for desktop, it is all working as I want on desktop, although I am having issues with it on mobile device.

 

On desktop I have integrate this code so the folders redirect to specific pages:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.header-nav-folder-title[href="/furniture-folder"]').click(function() {
    window.location = "https://sabustudio.com/furniture";
});

 $('.header-nav-folder-title[href="/object-folder"]').click(function() {
    window.location = "https://sabustudio.com/object";
});

  $('.header-nav-folder-title[href="/lighting-folder"]').click(function() {
    window.location = "https://sabustudio.com/lighting";
});

 

Although, on mobile the folder navigation does not utilise the redirect link as it does on desktop, it just links to the folder contents.

It currently goes as follows:

 

482366094_ScreenShot2021-07-29at3_20_16pm.thumb.png.29fb0fb5ebfa40bd29541ed6b8d49a2d.png895310353_ScreenShot2021-07-29at3_18_45pm.thumb.png.9cdf3e2b7f57a3f1eeced867bd4fdaf5.png

 

 

I would like it to go:

 

 

482366094_ScreenShot2021-07-29at3_20_16pm.thumb.png.29fb0fb5ebfa40bd29541ed6b8d49a2d.png436489149_ScreenShot2021-07-29at3_19_12pm.thumb.png.cd3177294daefdb865b6d96c5fb0594c.png

 

 

I am trying to remove/bypass the second hamburger menu page and instead wanting to use the redirect link. This enables better user experience for my product. 

I'm not sure if its possible to do this, but I imagine there would be a way to do this.

Any help would be much appreciated!

 

Thanks

 

Edited by Sabu
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Hi. Use new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $('.header-nav-folder-title[href="/furniture-folder"], [data-folder-id="/furniture-folder"]').click(function() {
    window.location = "https://sabustudio.com/furniture";
});

 $('.header-nav-folder-title[href="/object-folder"], [data-folder-id="/object-folder"]').click(function() {
    window.location = "https://sabustudio.com/object";
});

  $('.header-nav-folder-title[href="/lighting-folder"], [data-folder-id="/lighting-folder"]').click(function() {
    window.location = "https://sabustudio.com/lighting";
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 9 months later...
  • 5 months later...

Hi again,

I have updated my website, I am now having issues with this code below, it works great for desktop, but it isn't functioning on mobile device. 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>


   $('.header-nav-folder-title[href="/furniture_folder"], [data-folder-id="/furniture-folder"]').click(function() {
    window.location = "https://sabustudio.com/furniture";
});

  $('.header-nav-folder-title[href="/lighting_folder"], [data-folder-id="/lighting-folder"]').click(function() {
    window.location = "https://sabustudio.com/lighting";
});
</script>

 

 

Site URL: https://www.sabustudio.com

 

Any help would be greatly appreciated.

 

Regards,

Sam

 

Link to comment
On 11/10/2022 at 6:37 AM, Sabu said:

Hi again,

I have updated my website, I am now having issues with this code below, it works great for desktop, but it isn't functioning on mobile device. 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>


   $('.header-nav-folder-title[href="/furniture_folder"], [data-folder-id="/furniture-folder"]').click(function() {
    window.location = "https://sabustudio.com/furniture";
});

  $('.header-nav-folder-title[href="/lighting_folder"], [data-folder-id="/lighting-folder"]').click(function() {
    window.location = "https://sabustudio.com/lighting";
});
</script>

 

 

Site URL: https://www.sabustudio.com

 

Any help would be greatly appreciated.

 

Regards,

Sam

 

Try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $('.header-nav-folder-title[href="/furniture_folder"], [data-folder-id="/furniture_folder"]').click(function() {
    window.location = "https://sabustudio.com/furniture";
});

  $('.header-nav-folder-title[href="/lighting_folder"], [data-folder-id="/lighting_folder"]').click(function() {
    window.location = "https://sabustudio.com/lighting";
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank 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.