Icon dropping onto new line

[redleaf]

I have a footer here http://salternssailingclub-co-uk.ntc11-p1rea.seeinside.co.uk/

You previously advised adding the social icons to a global block to keep them together. On desktop they look OK. But the problem now is that on mobile the last social icon drops to a new line (if I add a 4th icon that drops to a new line with 3 on the first line). I’ve tried adding a width/maxwidth of 300 to the row but that doesn’t fix it. Any ideas?

[friech]

Hi @redleaf,

Thank you for writing in, instead of a Global Block, please set up your social icon links as a Navigation Inline

Please follow the guidelines provided here.

Let us know how it goes,
Cheers!

[redleaf]

Hi - that’s looking better. But…using this method is there a way to open the link in a new window? I don’t see any option for that?
– John

[lely]

Hello John,

There’s no existing option to open the menu link on a new window. On this navigation inline element > Customize Tab > ID field: Try to add social-links. Then on this footer custom JS, add the following script:

jQuery ( function($) {

	$('#social-links a').each(function() {
		var a = new RegExp('/' + window.location.host + '/');
		if(!a.test(this.href)) {
			$(this).click(function(event) {
				event.preventDefault();
				event.stopPropagation();
				window.open(this.href, '_blank');
			}
			);
		}
	});

	
} );

That script will open the link to a new tab.

Hope this helps.