Social media and other links in contacts header

I just updated Sydney Pro theme with the latest version and I would like to create a contact header similar to what you have on Finance demo site.

How can I add social media icons and add custom links next to them? I tried to add custom links to “social links menu”, but nothing shows up.

Thanks.

Hello,

You can have similar header contact info section with Sydney Pro, you can check it on Sydney Pro demo site:
https://demo.athemes.com/sydney-pro/

  1. Please check Header settings in Sydney Pro section of Sydney Pro documentation regarding the contact information on the left side.

  2. You should create a social menu with your social links and assign it to Header social menu location.

Please let me know if you need more help.

Kind Regards, Roman.

Thanks for your response, but I want the header in Finance demo site. I want the social media icons and a button next to them on the right side of the header area. Please help.

14%20AM

Hello, you can try to do this with jQuery.

  1. Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

  2. Go to your Dashboard → Settings → Insert Headers and Footers → add the following code to Scripts in Header section, and click Save button.

<script>
    jQuery(document).ready(function(){
        jQuery('.header-contact #menu-social').append(jQuery('<a href="ButtonLink" class="roll-button">ButtonText</a>'));
    });
</script>

Just replace ButtonLink and ButtonText in the code above with appropriate values.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Roman,

I added the code, but nothing happens. I only have social media icons.

35%20PM

Roman,

I changed “#menu-social” to “#menu-social-links-menu” and it worked. Thanks.

But I have another question. The ButtonLink I need to add looks like this.

---- -----

How can I add this to your code?

For some reason, the code I added doesn’t appear. How can I show you the code?

Hello,

How can I show you the code?

Just highlight it and click Preformatted text button in toolbar at the top of reply input field, it looks like this </>

You can also use Ctrl+Shift+C combination instead of clicking that button.

Kind Regards, Roman.

Thanks, Roman.
So, basically I need to use this code for the “button link”.

<script src="https://widgets.healcode.com/javascripts/healcode.js" type="text/javascript"></script>  <healcode-widget data-version="0.2" data-link-class="healcode-login-register-text-link" data-site-id="xxxxx" data-mb-site-id="xxxxx" data-type="account-link" data-inner-html="My Account"></healcode-widget>

Hello,

You can’t use that code as a link, unfortunately. I suppose that you are trying to follow this process in order to show MINDBODY widget on button click, you can try to use a popup plugin to achieve that. For example one of these:


Kind Regards, Roman.

P. S.
You might want to check this plugin as well: