Jump to content

Is it possible to STOP social links from opening in new tabs/windows in 7.1?

Recommended Posts

I use a social link within my navigation with a custom icon to link to a page within my site. Currently, since it's a social link, it automatically opens a new tab/window every time it's clicked. Is there a way to disable this feature so the page just opens in the same tab?

I know there's a simple switch option to do so with normal links, so I'm wondering if I'm just missing something obvious or this requires code to be accomplished.

I'm hoping to find a way for this to work across both desktop and mobile site versions. It would also be ideal if I could identify specific social links to NOT open in new tabs/windows, but others that could. That option is less important though. Any help would be greatly appreciated, thanks!

Link to comment
2 hours ago, msahlit said:

Hi Tuan,

Thanks for responding! My site url is sahlitdesign.com and I'm currently using the 7.1 business plan. 

Hi. Do you still need help on this? I don't see social links on header/footer

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 12/23/2020 at 12:55 AM, tuanphan said:

Hi. Do you still need help on this? I don't see social links on header/footer

Yes I do. The magnifying glass (a custom icon) within my navigation bar is a social link. It links to a page within my own site. I would like to make it stop opening in a separate tab/window when clicked. 

Link to comment
On 12/29/2020 at 2:49 PM, msahlit said:

Yes I do. The magnifying glass (a custom icon) within my navigation bar is a social link. It links to a page within my own site. I would like to make it stop opening in a separate tab/window when clicked. 

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-actions-action.header-actions-action--social a').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
13 hours ago, tuanphan said:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-actions-action.header-actions-action--social a').attr('target','_self'); }); </script>

Thank you so much! This works great.

Additional question:

By chance, is there a way to identify specific social links to open in an external tab (like they normally do) and others to open within the one currently open (as accomplished by the code above)? 

For example, if down the line I wanted to add other social links that would open in new tabs, but have this one remain opening within the current tab, would there be a way to accomplish that?

Thank you so much again!

Link to comment
1 hour ago, msahlit said:

Additional question:

By chance, is there a way to identify specific social links to open in an external tab (like they normally do) and others to open within the one currently open (as accomplished by the code above)? 

For example, if down the line I wanted to add other social links that would open in new tabs, but have this one remain opening within the current tab, would there be a way to accomplish that?

The short answer is yes that should be doable. I suggest you hit us up at the time when you need to do this. In general we would use code to target specific social icons by position to open into a new tab/window.

You could post a follow up to his thread or post a new thread when you're ready to tackle this task.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 12/30/2020 at 5:38 AM, tuanphan said:

Add to Home > Settings > Advanced > Code Injection > Footer


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-actions-action.header-actions-action--social a').attr('target','_self');
});
</script>

I just realized this works great on desktop, but on mobile the page is still opening a new tab/window when the magnifying glass is clicked. Any chance there is a solution that will work for both desktop and mobile? 

Thank you again!

Link to comment
On 12/30/2020 at 8:21 PM, creedon said:

You could post a follow up to his thread or post a new thread when you're ready to tackle this task.

I realized the code tuanphan provided works great on desktop, but on mobile the page is still opening a new tab/window when the magnifying glass is clicked. I replied to him first last week, but have yet to hear back.

Any chance you may know a solution that will work for both desktop and mobile? 

Thanks!

Link to comment
On 1/11/2021 at 2:39 AM, msahlit said:

I realized the code tuanphan provided works great on desktop, but on mobile the page is still opening a new tab/window when the magnifying glass is clicked. I replied to him first last week, but have yet to hear back.

Any chance you may know a solution that will work for both desktop and mobile? 

Thanks!

Sorry, Overload.

Use new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-actions-action.header-actions-action--social a, .header-menu-actions a').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
7 hours ago, tuanphan said:

Sorry, Overload.

Use new code


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-actions-action.header-actions-action--social a, .header-menu-actions a').attr('target','_self');
});
</script>

No problem at all and thank you so much!

Link to comment
  • 11 months later...
On 1/10/2022 at 11:16 PM, Palmside said:

Hey, I was in a similar position and stumbled across the code mentioned earlier, it works great for me too. Just wondering there is a way to make it so the social links open in a new tab but it's only the flags that don't open in a new tab?

https://lynx-piccolo-estl.squarespace.com/

The flags also switch depending if the website is on an English or Russian page.

Plan is business.

Cheers!

 

Use this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-actions-action.header-actions-action--social a:not([href*="manapart.net"]), .header-menu-actions a:not([href*="manapart.net"])').attr('target','_blank');
});
</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.