Jump to content

Alternate url on desktop and mobile button

Recommended Posts

  • Replies 8
  • Views 250
  • Created
  • Last Reply

Top Posters In This Topic

6 hours ago, TheHouseOfMischief said:

Hi, I am looking to have alternate url on desktop and mobile view - from the same button. Is it possible? Thanks.

Can you describe more detail about your idea? Providing your URL so we can check it easier

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@TheHouseOfMischief You could have one button for desktop and a second for mobile. Then you can use CSS to hide the mobile button on desktop and the desktop button on mobile. 

If you can share the site or give the block-#s I can give you the CSS.

 

Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan | Westerly Creative Studio
  
 🍪  Still need your website policies?
Termageddon makes it easy.  
Get 10% off your first year! (< affiliate link) 

Link to comment

Hi thank you. I can't seem to find the block ID for this one. The button is on the top nav bar menu. 

Not sure if the below is helpful?

<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary" href="tel:+441234944700" target="_blank">
                    Call us now
                  </a>

Link to comment
On 6/5/2024 at 4:32 PM, TheHouseOfMischief said:

Hi thank you. I can't seem to find the block ID for this one. The button is on the top nav bar menu. 

Not sure if the below is helpful?

<a class="btn btn--border theme-btn--primary-inverse sqs-button-element--primary" href="tel:+441234944700" target="_blank">
                    Call us now
                  </a>

You mean different phone number in mobile or which url?

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
On 6/8/2024 at 12:01 AM, TheHouseOfMischief said:

Hi, on my navigation bar, in addition to the website menu, I have a button  with a link to the company's phone number. This works on mobile but not on desktop. So I was hoping to have an alternate link on desktop view, which links to the contact page instead.

You can use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('.header-display-desktop a.btn').attr('href','/contact');
});
</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
23 hours ago, TheHouseOfMischief said:

Fantastic @tuanphan, you're a wizard. Thank you so much!

Is there a way to avoid the opening of a new tab on desktop? 

 

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($) {
	$('.header-display-desktop a.btn').attr('href','/contact');
    $('.header-display-desktop a.btn').attr('target','_self');
});
</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.